From ca69db752bc8072493676280cdfbc40065fee705 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Mon, 2 Dec 2024 11:54:52 -0300 Subject: [PATCH 01/24] feat: delete `navbar` and rename `NavBarV2` to `navbar` --- apps/meteor/client/NavBarV2/NavBar.tsx | 87 ----------------- apps/meteor/client/NavBarV2/index.ts | 1 - .../NavBarItemOmniChannelCallDialPad.tsx | 0 .../NavBarItemOmnichannelCallToggle.tsx | 0 .../NavBarItemOmnichannelCallToggleError.tsx | 0 ...NavBarItemOmnichannelCallToggleLoading.tsx | 0 .../NavBarItemOmnichannelCallToggleReady.tsx | 0 .../NavBarItemOmnichannelContact.tsx | 0 .../NavBarItemOmnichannelLivechatToggle.tsx | 0 .../NavBarItemOmnichannelQueue.tsx | 0 .../NavBarOmnichannelToolbar/index.ts | 0 .../NavBarItemAuditMenu.tsx | 0 .../NavBarItemDirectoryPage.tsx | 0 .../NavBarPagesToolbar/NavBarItemHomePage.tsx | 0 .../NavBarItemMarketPlaceMenu.tsx | 0 .../hooks/useAuditMenu.spec.tsx | 0 .../NavBarPagesToolbar/hooks/useAuditMenu.tsx | 0 .../hooks/useMarketPlaceMenu.spec.tsx | 0 .../hooks/useMarketPlaceMenu.tsx | 0 .../NavBarPagesToolbar/index.ts | 0 .../NavBarItemAdministrationMenu.tsx | 0 .../NavBarItemLoginPage.tsx | 0 .../UserMenu/EditStatusModal.tsx | 0 .../UserMenu/UserMenu.tsx | 0 .../UserMenu/UserMenuButton.tsx | 0 .../UserMenu/UserMenuHeader.tsx | 0 .../UserMenu/hooks/useAccountItems.tsx | 0 .../hooks/useCustomStatusModalHandler.tsx | 0 .../UserMenu/hooks/useStatusItems.tsx | 0 .../UserMenu/hooks/useUserMenu.tsx | 0 .../UserMenu/hooks/useVoipItemsSection.tsx | 0 .../NavBarSettingsToolbar/UserMenu/index.ts | 0 .../hooks/useAdministrationMenu.spec.tsx | 0 .../hooks/useAdministrationMenu.tsx | 0 .../NavBarSettingsToolbar/index.ts | 0 .../NavBarItemVoipDialer.tsx | 0 .../NavBarVoipToolbar/index.ts | 0 apps/meteor/client/navbar/Navbar.tsx | 97 ++++++++++++++++--- .../actions/NavbarAdministrationAction.tsx | 33 ------- .../navbar/actions/NavbarAuditAction.tsx | 34 ------- .../navbar/actions/NavbarHomeAction.tsx | 38 -------- .../actions/NavbarMarketplaceAction.tsx | 44 --------- .../navbar/actions/NavbarUserAction.tsx | 20 ---- apps/meteor/client/navbar/index.ts | 2 +- .../root/MainLayout/LayoutWithSidebarV2.tsx | 2 +- 45 files changed, 83 insertions(+), 275 deletions(-) delete mode 100644 apps/meteor/client/NavBarV2/NavBar.tsx delete mode 100644 apps/meteor/client/NavBarV2/index.ts rename apps/meteor/client/{NavBarV2 => navbar}/NavBarOmnichannelToolbar/NavBarItemOmniChannelCallDialPad.tsx (100%) rename apps/meteor/client/{NavBarV2 => navbar}/NavBarOmnichannelToolbar/NavBarItemOmnichannelCallToggle.tsx (100%) rename apps/meteor/client/{NavBarV2 => navbar}/NavBarOmnichannelToolbar/NavBarItemOmnichannelCallToggleError.tsx (100%) rename apps/meteor/client/{NavBarV2 => navbar}/NavBarOmnichannelToolbar/NavBarItemOmnichannelCallToggleLoading.tsx (100%) rename apps/meteor/client/{NavBarV2 => navbar}/NavBarOmnichannelToolbar/NavBarItemOmnichannelCallToggleReady.tsx (100%) rename apps/meteor/client/{NavBarV2 => navbar}/NavBarOmnichannelToolbar/NavBarItemOmnichannelContact.tsx (100%) rename apps/meteor/client/{NavBarV2 => navbar}/NavBarOmnichannelToolbar/NavBarItemOmnichannelLivechatToggle.tsx (100%) rename apps/meteor/client/{NavBarV2 => navbar}/NavBarOmnichannelToolbar/NavBarItemOmnichannelQueue.tsx (100%) rename apps/meteor/client/{NavBarV2 => navbar}/NavBarOmnichannelToolbar/index.ts (100%) rename apps/meteor/client/{NavBarV2 => navbar}/NavBarPagesToolbar/NavBarItemAuditMenu.tsx (100%) rename apps/meteor/client/{NavBarV2 => navbar}/NavBarPagesToolbar/NavBarItemDirectoryPage.tsx (100%) rename apps/meteor/client/{NavBarV2 => navbar}/NavBarPagesToolbar/NavBarItemHomePage.tsx (100%) rename apps/meteor/client/{NavBarV2 => navbar}/NavBarPagesToolbar/NavBarItemMarketPlaceMenu.tsx (100%) rename apps/meteor/client/{NavBarV2 => navbar}/NavBarPagesToolbar/hooks/useAuditMenu.spec.tsx (100%) rename apps/meteor/client/{NavBarV2 => navbar}/NavBarPagesToolbar/hooks/useAuditMenu.tsx (100%) rename apps/meteor/client/{NavBarV2 => navbar}/NavBarPagesToolbar/hooks/useMarketPlaceMenu.spec.tsx (100%) rename apps/meteor/client/{NavBarV2 => navbar}/NavBarPagesToolbar/hooks/useMarketPlaceMenu.tsx (100%) rename apps/meteor/client/{NavBarV2 => navbar}/NavBarPagesToolbar/index.ts (100%) rename apps/meteor/client/{NavBarV2 => navbar}/NavBarSettingsToolbar/NavBarItemAdministrationMenu.tsx (100%) rename apps/meteor/client/{NavBarV2 => navbar}/NavBarSettingsToolbar/NavBarItemLoginPage.tsx (100%) rename apps/meteor/client/{NavBarV2 => navbar}/NavBarSettingsToolbar/UserMenu/EditStatusModal.tsx (100%) rename apps/meteor/client/{NavBarV2 => navbar}/NavBarSettingsToolbar/UserMenu/UserMenu.tsx (100%) rename apps/meteor/client/{NavBarV2 => navbar}/NavBarSettingsToolbar/UserMenu/UserMenuButton.tsx (100%) rename apps/meteor/client/{NavBarV2 => navbar}/NavBarSettingsToolbar/UserMenu/UserMenuHeader.tsx (100%) rename apps/meteor/client/{NavBarV2 => navbar}/NavBarSettingsToolbar/UserMenu/hooks/useAccountItems.tsx (100%) rename apps/meteor/client/{NavBarV2 => navbar}/NavBarSettingsToolbar/UserMenu/hooks/useCustomStatusModalHandler.tsx (100%) rename apps/meteor/client/{NavBarV2 => navbar}/NavBarSettingsToolbar/UserMenu/hooks/useStatusItems.tsx (100%) rename apps/meteor/client/{NavBarV2 => navbar}/NavBarSettingsToolbar/UserMenu/hooks/useUserMenu.tsx (100%) rename apps/meteor/client/{NavBarV2 => navbar}/NavBarSettingsToolbar/UserMenu/hooks/useVoipItemsSection.tsx (100%) rename apps/meteor/client/{NavBarV2 => navbar}/NavBarSettingsToolbar/UserMenu/index.ts (100%) rename apps/meteor/client/{NavBarV2 => navbar}/NavBarSettingsToolbar/hooks/useAdministrationMenu.spec.tsx (100%) rename apps/meteor/client/{NavBarV2 => navbar}/NavBarSettingsToolbar/hooks/useAdministrationMenu.tsx (100%) rename apps/meteor/client/{NavBarV2 => navbar}/NavBarSettingsToolbar/index.ts (100%) rename apps/meteor/client/{NavBarV2 => navbar}/NavBarVoipToolbar/NavBarItemVoipDialer.tsx (100%) rename apps/meteor/client/{NavBarV2 => navbar}/NavBarVoipToolbar/index.ts (100%) delete mode 100644 apps/meteor/client/navbar/actions/NavbarAdministrationAction.tsx delete mode 100644 apps/meteor/client/navbar/actions/NavbarAuditAction.tsx delete mode 100644 apps/meteor/client/navbar/actions/NavbarHomeAction.tsx delete mode 100644 apps/meteor/client/navbar/actions/NavbarMarketplaceAction.tsx delete mode 100644 apps/meteor/client/navbar/actions/NavbarUserAction.tsx diff --git a/apps/meteor/client/NavBarV2/NavBar.tsx b/apps/meteor/client/NavBarV2/NavBar.tsx deleted file mode 100644 index 116ff00b4075..000000000000 --- a/apps/meteor/client/NavBarV2/NavBar.tsx +++ /dev/null @@ -1,87 +0,0 @@ -import { useToolbar } from '@react-aria/toolbar'; -import { NavBar as NavBarComponent, NavBarSection, NavBarGroup, NavBarDivider } from '@rocket.chat/fuselage'; -import { usePermission, useTranslation, useUser } from '@rocket.chat/ui-contexts'; -import { useVoipState } from '@rocket.chat/ui-voip'; -import React, { useRef } from 'react'; - -import { - NavBarItemOmniChannelCallDialPad, - NavBarItemOmnichannelContact, - NavBarItemOmnichannelLivechatToggle, - NavBarItemOmnichannelQueue, - NavBarItemOmnichannelCallToggle, -} from './NavBarOmnichannelToolbar'; -import { NavBarItemMarketPlaceMenu, NavBarItemAuditMenu, NavBarItemDirectoryPage, NavBarItemHomePage } from './NavBarPagesToolbar'; -import { NavBarItemLoginPage, NavBarItemAdministrationMenu, UserMenu } from './NavBarSettingsToolbar'; -import { NavBarItemVoipDialer } from './NavBarVoipToolbar'; -import { useIsCallEnabled, useIsCallReady } from '../contexts/CallContext'; -import { useOmnichannelEnabled } from '../hooks/omnichannel/useOmnichannelEnabled'; -import { useOmnichannelShowQueueLink } from '../hooks/omnichannel/useOmnichannelShowQueueLink'; -import { useHasLicenseModule } from '../hooks/useHasLicenseModule'; - -const NavBar = () => { - const t = useTranslation(); - const user = useUser(); - - const hasAuditLicense = useHasLicenseModule('auditing') === true; - - const showOmnichannel = useOmnichannelEnabled(); - const hasManageAppsPermission = usePermission('manage-apps'); - const hasAccessMarketplacePermission = usePermission('access-marketplace'); - const showMarketplace = hasAccessMarketplacePermission || hasManageAppsPermission; - - const showOmnichannelQueueLink = useOmnichannelShowQueueLink(); - const isCallEnabled = useIsCallEnabled(); - const isCallReady = useIsCallReady(); - const { isEnabled: showVoip } = useVoipState(); - - const pagesToolbarRef = useRef(null); - const { toolbarProps: pagesToolbarProps } = useToolbar({ 'aria-label': t('Pages') }, pagesToolbarRef); - - const omnichannelToolbarRef = useRef(null); - const { toolbarProps: omnichannelToolbarProps } = useToolbar({ 'aria-label': t('Omnichannel') }, omnichannelToolbarRef); - - const voipToolbarRef = useRef(null); - const { toolbarProps: voipToolbarProps } = useToolbar({ 'aria-label': t('Voice_Call') }, voipToolbarRef); - - return ( - - - - - - {showMarketplace && } - {hasAuditLicense && } - - {showOmnichannel && ( - <> - - - {showOmnichannelQueueLink && } - {isCallReady && } - - {isCallEnabled && } - - - - )} - {showVoip && ( - <> - - - - - - )} - - - - - {user ? : } - - - - ); -}; - -export default NavBar; diff --git a/apps/meteor/client/NavBarV2/index.ts b/apps/meteor/client/NavBarV2/index.ts deleted file mode 100644 index 902ee590de66..000000000000 --- a/apps/meteor/client/NavBarV2/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './NavBar'; diff --git a/apps/meteor/client/NavBarV2/NavBarOmnichannelToolbar/NavBarItemOmniChannelCallDialPad.tsx b/apps/meteor/client/navbar/NavBarOmnichannelToolbar/NavBarItemOmniChannelCallDialPad.tsx similarity index 100% rename from apps/meteor/client/NavBarV2/NavBarOmnichannelToolbar/NavBarItemOmniChannelCallDialPad.tsx rename to apps/meteor/client/navbar/NavBarOmnichannelToolbar/NavBarItemOmniChannelCallDialPad.tsx diff --git a/apps/meteor/client/NavBarV2/NavBarOmnichannelToolbar/NavBarItemOmnichannelCallToggle.tsx b/apps/meteor/client/navbar/NavBarOmnichannelToolbar/NavBarItemOmnichannelCallToggle.tsx similarity index 100% rename from apps/meteor/client/NavBarV2/NavBarOmnichannelToolbar/NavBarItemOmnichannelCallToggle.tsx rename to apps/meteor/client/navbar/NavBarOmnichannelToolbar/NavBarItemOmnichannelCallToggle.tsx diff --git a/apps/meteor/client/NavBarV2/NavBarOmnichannelToolbar/NavBarItemOmnichannelCallToggleError.tsx b/apps/meteor/client/navbar/NavBarOmnichannelToolbar/NavBarItemOmnichannelCallToggleError.tsx similarity index 100% rename from apps/meteor/client/NavBarV2/NavBarOmnichannelToolbar/NavBarItemOmnichannelCallToggleError.tsx rename to apps/meteor/client/navbar/NavBarOmnichannelToolbar/NavBarItemOmnichannelCallToggleError.tsx diff --git a/apps/meteor/client/NavBarV2/NavBarOmnichannelToolbar/NavBarItemOmnichannelCallToggleLoading.tsx b/apps/meteor/client/navbar/NavBarOmnichannelToolbar/NavBarItemOmnichannelCallToggleLoading.tsx similarity index 100% rename from apps/meteor/client/NavBarV2/NavBarOmnichannelToolbar/NavBarItemOmnichannelCallToggleLoading.tsx rename to apps/meteor/client/navbar/NavBarOmnichannelToolbar/NavBarItemOmnichannelCallToggleLoading.tsx diff --git a/apps/meteor/client/NavBarV2/NavBarOmnichannelToolbar/NavBarItemOmnichannelCallToggleReady.tsx b/apps/meteor/client/navbar/NavBarOmnichannelToolbar/NavBarItemOmnichannelCallToggleReady.tsx similarity index 100% rename from apps/meteor/client/NavBarV2/NavBarOmnichannelToolbar/NavBarItemOmnichannelCallToggleReady.tsx rename to apps/meteor/client/navbar/NavBarOmnichannelToolbar/NavBarItemOmnichannelCallToggleReady.tsx diff --git a/apps/meteor/client/NavBarV2/NavBarOmnichannelToolbar/NavBarItemOmnichannelContact.tsx b/apps/meteor/client/navbar/NavBarOmnichannelToolbar/NavBarItemOmnichannelContact.tsx similarity index 100% rename from apps/meteor/client/NavBarV2/NavBarOmnichannelToolbar/NavBarItemOmnichannelContact.tsx rename to apps/meteor/client/navbar/NavBarOmnichannelToolbar/NavBarItemOmnichannelContact.tsx diff --git a/apps/meteor/client/NavBarV2/NavBarOmnichannelToolbar/NavBarItemOmnichannelLivechatToggle.tsx b/apps/meteor/client/navbar/NavBarOmnichannelToolbar/NavBarItemOmnichannelLivechatToggle.tsx similarity index 100% rename from apps/meteor/client/NavBarV2/NavBarOmnichannelToolbar/NavBarItemOmnichannelLivechatToggle.tsx rename to apps/meteor/client/navbar/NavBarOmnichannelToolbar/NavBarItemOmnichannelLivechatToggle.tsx diff --git a/apps/meteor/client/NavBarV2/NavBarOmnichannelToolbar/NavBarItemOmnichannelQueue.tsx b/apps/meteor/client/navbar/NavBarOmnichannelToolbar/NavBarItemOmnichannelQueue.tsx similarity index 100% rename from apps/meteor/client/NavBarV2/NavBarOmnichannelToolbar/NavBarItemOmnichannelQueue.tsx rename to apps/meteor/client/navbar/NavBarOmnichannelToolbar/NavBarItemOmnichannelQueue.tsx diff --git a/apps/meteor/client/NavBarV2/NavBarOmnichannelToolbar/index.ts b/apps/meteor/client/navbar/NavBarOmnichannelToolbar/index.ts similarity index 100% rename from apps/meteor/client/NavBarV2/NavBarOmnichannelToolbar/index.ts rename to apps/meteor/client/navbar/NavBarOmnichannelToolbar/index.ts diff --git a/apps/meteor/client/NavBarV2/NavBarPagesToolbar/NavBarItemAuditMenu.tsx b/apps/meteor/client/navbar/NavBarPagesToolbar/NavBarItemAuditMenu.tsx similarity index 100% rename from apps/meteor/client/NavBarV2/NavBarPagesToolbar/NavBarItemAuditMenu.tsx rename to apps/meteor/client/navbar/NavBarPagesToolbar/NavBarItemAuditMenu.tsx diff --git a/apps/meteor/client/NavBarV2/NavBarPagesToolbar/NavBarItemDirectoryPage.tsx b/apps/meteor/client/navbar/NavBarPagesToolbar/NavBarItemDirectoryPage.tsx similarity index 100% rename from apps/meteor/client/NavBarV2/NavBarPagesToolbar/NavBarItemDirectoryPage.tsx rename to apps/meteor/client/navbar/NavBarPagesToolbar/NavBarItemDirectoryPage.tsx diff --git a/apps/meteor/client/NavBarV2/NavBarPagesToolbar/NavBarItemHomePage.tsx b/apps/meteor/client/navbar/NavBarPagesToolbar/NavBarItemHomePage.tsx similarity index 100% rename from apps/meteor/client/NavBarV2/NavBarPagesToolbar/NavBarItemHomePage.tsx rename to apps/meteor/client/navbar/NavBarPagesToolbar/NavBarItemHomePage.tsx diff --git a/apps/meteor/client/NavBarV2/NavBarPagesToolbar/NavBarItemMarketPlaceMenu.tsx b/apps/meteor/client/navbar/NavBarPagesToolbar/NavBarItemMarketPlaceMenu.tsx similarity index 100% rename from apps/meteor/client/NavBarV2/NavBarPagesToolbar/NavBarItemMarketPlaceMenu.tsx rename to apps/meteor/client/navbar/NavBarPagesToolbar/NavBarItemMarketPlaceMenu.tsx diff --git a/apps/meteor/client/NavBarV2/NavBarPagesToolbar/hooks/useAuditMenu.spec.tsx b/apps/meteor/client/navbar/NavBarPagesToolbar/hooks/useAuditMenu.spec.tsx similarity index 100% rename from apps/meteor/client/NavBarV2/NavBarPagesToolbar/hooks/useAuditMenu.spec.tsx rename to apps/meteor/client/navbar/NavBarPagesToolbar/hooks/useAuditMenu.spec.tsx diff --git a/apps/meteor/client/NavBarV2/NavBarPagesToolbar/hooks/useAuditMenu.tsx b/apps/meteor/client/navbar/NavBarPagesToolbar/hooks/useAuditMenu.tsx similarity index 100% rename from apps/meteor/client/NavBarV2/NavBarPagesToolbar/hooks/useAuditMenu.tsx rename to apps/meteor/client/navbar/NavBarPagesToolbar/hooks/useAuditMenu.tsx diff --git a/apps/meteor/client/NavBarV2/NavBarPagesToolbar/hooks/useMarketPlaceMenu.spec.tsx b/apps/meteor/client/navbar/NavBarPagesToolbar/hooks/useMarketPlaceMenu.spec.tsx similarity index 100% rename from apps/meteor/client/NavBarV2/NavBarPagesToolbar/hooks/useMarketPlaceMenu.spec.tsx rename to apps/meteor/client/navbar/NavBarPagesToolbar/hooks/useMarketPlaceMenu.spec.tsx diff --git a/apps/meteor/client/NavBarV2/NavBarPagesToolbar/hooks/useMarketPlaceMenu.tsx b/apps/meteor/client/navbar/NavBarPagesToolbar/hooks/useMarketPlaceMenu.tsx similarity index 100% rename from apps/meteor/client/NavBarV2/NavBarPagesToolbar/hooks/useMarketPlaceMenu.tsx rename to apps/meteor/client/navbar/NavBarPagesToolbar/hooks/useMarketPlaceMenu.tsx diff --git a/apps/meteor/client/NavBarV2/NavBarPagesToolbar/index.ts b/apps/meteor/client/navbar/NavBarPagesToolbar/index.ts similarity index 100% rename from apps/meteor/client/NavBarV2/NavBarPagesToolbar/index.ts rename to apps/meteor/client/navbar/NavBarPagesToolbar/index.ts diff --git a/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/NavBarItemAdministrationMenu.tsx b/apps/meteor/client/navbar/NavBarSettingsToolbar/NavBarItemAdministrationMenu.tsx similarity index 100% rename from apps/meteor/client/NavBarV2/NavBarSettingsToolbar/NavBarItemAdministrationMenu.tsx rename to apps/meteor/client/navbar/NavBarSettingsToolbar/NavBarItemAdministrationMenu.tsx diff --git a/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/NavBarItemLoginPage.tsx b/apps/meteor/client/navbar/NavBarSettingsToolbar/NavBarItemLoginPage.tsx similarity index 100% rename from apps/meteor/client/NavBarV2/NavBarSettingsToolbar/NavBarItemLoginPage.tsx rename to apps/meteor/client/navbar/NavBarSettingsToolbar/NavBarItemLoginPage.tsx diff --git a/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/EditStatusModal.tsx b/apps/meteor/client/navbar/NavBarSettingsToolbar/UserMenu/EditStatusModal.tsx similarity index 100% rename from apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/EditStatusModal.tsx rename to apps/meteor/client/navbar/NavBarSettingsToolbar/UserMenu/EditStatusModal.tsx diff --git a/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/UserMenu.tsx b/apps/meteor/client/navbar/NavBarSettingsToolbar/UserMenu/UserMenu.tsx similarity index 100% rename from apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/UserMenu.tsx rename to apps/meteor/client/navbar/NavBarSettingsToolbar/UserMenu/UserMenu.tsx diff --git a/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/UserMenuButton.tsx b/apps/meteor/client/navbar/NavBarSettingsToolbar/UserMenu/UserMenuButton.tsx similarity index 100% rename from apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/UserMenuButton.tsx rename to apps/meteor/client/navbar/NavBarSettingsToolbar/UserMenu/UserMenuButton.tsx diff --git a/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/UserMenuHeader.tsx b/apps/meteor/client/navbar/NavBarSettingsToolbar/UserMenu/UserMenuHeader.tsx similarity index 100% rename from apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/UserMenuHeader.tsx rename to apps/meteor/client/navbar/NavBarSettingsToolbar/UserMenu/UserMenuHeader.tsx diff --git a/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/hooks/useAccountItems.tsx b/apps/meteor/client/navbar/NavBarSettingsToolbar/UserMenu/hooks/useAccountItems.tsx similarity index 100% rename from apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/hooks/useAccountItems.tsx rename to apps/meteor/client/navbar/NavBarSettingsToolbar/UserMenu/hooks/useAccountItems.tsx diff --git a/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/hooks/useCustomStatusModalHandler.tsx b/apps/meteor/client/navbar/NavBarSettingsToolbar/UserMenu/hooks/useCustomStatusModalHandler.tsx similarity index 100% rename from apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/hooks/useCustomStatusModalHandler.tsx rename to apps/meteor/client/navbar/NavBarSettingsToolbar/UserMenu/hooks/useCustomStatusModalHandler.tsx diff --git a/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/hooks/useStatusItems.tsx b/apps/meteor/client/navbar/NavBarSettingsToolbar/UserMenu/hooks/useStatusItems.tsx similarity index 100% rename from apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/hooks/useStatusItems.tsx rename to apps/meteor/client/navbar/NavBarSettingsToolbar/UserMenu/hooks/useStatusItems.tsx diff --git a/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/hooks/useUserMenu.tsx b/apps/meteor/client/navbar/NavBarSettingsToolbar/UserMenu/hooks/useUserMenu.tsx similarity index 100% rename from apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/hooks/useUserMenu.tsx rename to apps/meteor/client/navbar/NavBarSettingsToolbar/UserMenu/hooks/useUserMenu.tsx diff --git a/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/hooks/useVoipItemsSection.tsx b/apps/meteor/client/navbar/NavBarSettingsToolbar/UserMenu/hooks/useVoipItemsSection.tsx similarity index 100% rename from apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/hooks/useVoipItemsSection.tsx rename to apps/meteor/client/navbar/NavBarSettingsToolbar/UserMenu/hooks/useVoipItemsSection.tsx diff --git a/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/index.ts b/apps/meteor/client/navbar/NavBarSettingsToolbar/UserMenu/index.ts similarity index 100% rename from apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/index.ts rename to apps/meteor/client/navbar/NavBarSettingsToolbar/UserMenu/index.ts diff --git a/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/hooks/useAdministrationMenu.spec.tsx b/apps/meteor/client/navbar/NavBarSettingsToolbar/hooks/useAdministrationMenu.spec.tsx similarity index 100% rename from apps/meteor/client/NavBarV2/NavBarSettingsToolbar/hooks/useAdministrationMenu.spec.tsx rename to apps/meteor/client/navbar/NavBarSettingsToolbar/hooks/useAdministrationMenu.spec.tsx diff --git a/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/hooks/useAdministrationMenu.tsx b/apps/meteor/client/navbar/NavBarSettingsToolbar/hooks/useAdministrationMenu.tsx similarity index 100% rename from apps/meteor/client/NavBarV2/NavBarSettingsToolbar/hooks/useAdministrationMenu.tsx rename to apps/meteor/client/navbar/NavBarSettingsToolbar/hooks/useAdministrationMenu.tsx diff --git a/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/index.ts b/apps/meteor/client/navbar/NavBarSettingsToolbar/index.ts similarity index 100% rename from apps/meteor/client/NavBarV2/NavBarSettingsToolbar/index.ts rename to apps/meteor/client/navbar/NavBarSettingsToolbar/index.ts diff --git a/apps/meteor/client/NavBarV2/NavBarVoipToolbar/NavBarItemVoipDialer.tsx b/apps/meteor/client/navbar/NavBarVoipToolbar/NavBarItemVoipDialer.tsx similarity index 100% rename from apps/meteor/client/NavBarV2/NavBarVoipToolbar/NavBarItemVoipDialer.tsx rename to apps/meteor/client/navbar/NavBarVoipToolbar/NavBarItemVoipDialer.tsx diff --git a/apps/meteor/client/NavBarV2/NavBarVoipToolbar/index.ts b/apps/meteor/client/navbar/NavBarVoipToolbar/index.ts similarity index 100% rename from apps/meteor/client/NavBarV2/NavBarVoipToolbar/index.ts rename to apps/meteor/client/navbar/NavBarVoipToolbar/index.ts diff --git a/apps/meteor/client/navbar/Navbar.tsx b/apps/meteor/client/navbar/Navbar.tsx index 36f82be603f2..116ff00b4075 100644 --- a/apps/meteor/client/navbar/Navbar.tsx +++ b/apps/meteor/client/navbar/Navbar.tsx @@ -1,22 +1,87 @@ -import React from 'react'; +import { useToolbar } from '@react-aria/toolbar'; +import { NavBar as NavBarComponent, NavBarSection, NavBarGroup, NavBarDivider } from '@rocket.chat/fuselage'; +import { usePermission, useTranslation, useUser } from '@rocket.chat/ui-contexts'; +import { useVoipState } from '@rocket.chat/ui-voip'; +import React, { useRef } from 'react'; -import { Navbar as NavbarComponent } from '../components/Navbar'; -import NavbarAdministrationAction from './actions/NavbarAdministrationAction'; -import NavbarAuditAction from './actions/NavbarAuditAction'; -import NavbarHomeAction from './actions/NavbarHomeAction'; -import NavbarMarketplaceAction from './actions/NavbarMarketplaceAction'; -import NavbarUserAction from './actions/NavbarUserAction'; +import { + NavBarItemOmniChannelCallDialPad, + NavBarItemOmnichannelContact, + NavBarItemOmnichannelLivechatToggle, + NavBarItemOmnichannelQueue, + NavBarItemOmnichannelCallToggle, +} from './NavBarOmnichannelToolbar'; +import { NavBarItemMarketPlaceMenu, NavBarItemAuditMenu, NavBarItemDirectoryPage, NavBarItemHomePage } from './NavBarPagesToolbar'; +import { NavBarItemLoginPage, NavBarItemAdministrationMenu, UserMenu } from './NavBarSettingsToolbar'; +import { NavBarItemVoipDialer } from './NavBarVoipToolbar'; +import { useIsCallEnabled, useIsCallReady } from '../contexts/CallContext'; +import { useOmnichannelEnabled } from '../hooks/omnichannel/useOmnichannelEnabled'; +import { useOmnichannelShowQueueLink } from '../hooks/omnichannel/useOmnichannelShowQueueLink'; +import { useHasLicenseModule } from '../hooks/useHasLicenseModule'; + +const NavBar = () => { + const t = useTranslation(); + const user = useUser(); + + const hasAuditLicense = useHasLicenseModule('auditing') === true; + + const showOmnichannel = useOmnichannelEnabled(); + const hasManageAppsPermission = usePermission('manage-apps'); + const hasAccessMarketplacePermission = usePermission('access-marketplace'); + const showMarketplace = hasAccessMarketplacePermission || hasManageAppsPermission; + + const showOmnichannelQueueLink = useOmnichannelShowQueueLink(); + const isCallEnabled = useIsCallEnabled(); + const isCallReady = useIsCallReady(); + const { isEnabled: showVoip } = useVoipState(); + + const pagesToolbarRef = useRef(null); + const { toolbarProps: pagesToolbarProps } = useToolbar({ 'aria-label': t('Pages') }, pagesToolbarRef); + + const omnichannelToolbarRef = useRef(null); + const { toolbarProps: omnichannelToolbarProps } = useToolbar({ 'aria-label': t('Omnichannel') }, omnichannelToolbarRef); + + const voipToolbarRef = useRef(null); + const { toolbarProps: voipToolbarProps } = useToolbar({ 'aria-label': t('Voice_Call') }, voipToolbarRef); -const Navbar = () => { return ( - - - - - - - + + + + + + {showMarketplace && } + {hasAuditLicense && } + + {showOmnichannel && ( + <> + + + {showOmnichannelQueueLink && } + {isCallReady && } + + {isCallEnabled && } + + + + )} + {showVoip && ( + <> + + + + + + )} + + + + + {user ? : } + + + ); }; -export default Navbar; +export default NavBar; diff --git a/apps/meteor/client/navbar/actions/NavbarAdministrationAction.tsx b/apps/meteor/client/navbar/actions/NavbarAdministrationAction.tsx deleted file mode 100644 index f3c34c333dc5..000000000000 --- a/apps/meteor/client/navbar/actions/NavbarAdministrationAction.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { GenericMenu, useHandleMenuAction } from '@rocket.chat/ui-client'; -import { useTranslation, useRouter } from '@rocket.chat/ui-contexts'; -import type { AllHTMLAttributes } from 'react'; -import React from 'react'; - -import { NavbarAction } from '../../components/Navbar'; -import { useAdministrationItems } from '../../sidebar/header/actions/hooks/useAdministrationItems'; - -const NavbarAdministrationAction = (props: AllHTMLAttributes) => { - const t = useTranslation(); - - const administrationItems = useAdministrationItems(); - - const handleAction = useHandleMenuAction(administrationItems); - - const router = useRouter(); - - return ( - - - - ); -}; - -export default NavbarAdministrationAction; diff --git a/apps/meteor/client/navbar/actions/NavbarAuditAction.tsx b/apps/meteor/client/navbar/actions/NavbarAuditAction.tsx deleted file mode 100644 index 7e679faf0ab2..000000000000 --- a/apps/meteor/client/navbar/actions/NavbarAuditAction.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { GenericMenu, useHandleMenuAction } from '@rocket.chat/ui-client'; -import { useTranslation, useRouter } from '@rocket.chat/ui-contexts'; -import type { AllHTMLAttributes } from 'react'; -import React from 'react'; - -import { NavbarAction } from '../../components/Navbar'; -import { useAuditItems } from '../../sidebar/header/actions/hooks/useAuditItems'; - -const NavbarAuditAction = (props: AllHTMLAttributes) => { - const t = useTranslation(); - - const router = useRouter(); - const routerName = router.getRouteName(); - - const auditItems = useAuditItems(); - - const handleAction = useHandleMenuAction(auditItems); - - return ( - - - - ); -}; - -export default NavbarAuditAction; diff --git a/apps/meteor/client/navbar/actions/NavbarHomeAction.tsx b/apps/meteor/client/navbar/actions/NavbarHomeAction.tsx deleted file mode 100644 index 4204a723fe7d..000000000000 --- a/apps/meteor/client/navbar/actions/NavbarHomeAction.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { IconButton } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; -import { useRouter, useLayout, useSetting } from '@rocket.chat/ui-contexts'; -import type { HTMLAttributes } from 'react'; -import React from 'react'; -import { useTranslation } from 'react-i18next'; - -import { NavbarAction } from '../../components/Navbar'; - -type NavbarHomeActionProps = Omit, 'is'>; - -const NavbarHomeAction = (props: NavbarHomeActionProps) => { - const { t } = useTranslation(); - const router = useRouter(); - const { sidebar } = useLayout(); - const showHome = useSetting('Layout_Show_Home_Button'); - - const routeName = router.getLocationPathname(); - - const handleHome = useMutableCallback(() => { - sidebar.toggle(); - router.navigate('/home'); - }); - - return showHome ? ( - - routeName?.startsWith(name))} - title={t('Home')} - medium - icon='home' - onClick={handleHome} - /> - - ) : null; -}; - -export default NavbarHomeAction; diff --git a/apps/meteor/client/navbar/actions/NavbarMarketplaceAction.tsx b/apps/meteor/client/navbar/actions/NavbarMarketplaceAction.tsx deleted file mode 100644 index 92e3eccf592a..000000000000 --- a/apps/meteor/client/navbar/actions/NavbarMarketplaceAction.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import { IconButton } from '@rocket.chat/fuselage'; -import { GenericMenu, useHandleMenuAction } from '@rocket.chat/ui-client'; -import { useTranslation, useRouter } from '@rocket.chat/ui-contexts'; -import type { AllHTMLAttributes } from 'react'; -import React from 'react'; - -import { NavbarAction } from '../../components/Navbar'; -import { useAppsItems } from '../../sidebar/header/actions/hooks/useAppsItems'; - -const NavbarMarketplaceAction = (props: AllHTMLAttributes) => { - const t = useTranslation(); - const router = useRouter(); - const routeName = router.getRouteName(); - - const appItems = useAppsItems(); - - const handleAction = useHandleMenuAction(appItems); - - const showApps = appItems.length > 0; - - if (!showApps) { - return ( - - - - ); - } - - return ( - - - - ); -}; - -export default NavbarMarketplaceAction; diff --git a/apps/meteor/client/navbar/actions/NavbarUserAction.tsx b/apps/meteor/client/navbar/actions/NavbarUserAction.tsx deleted file mode 100644 index b0adcae19bef..000000000000 --- a/apps/meteor/client/navbar/actions/NavbarUserAction.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { Margins } from '@rocket.chat/fuselage'; -import { useUser } from '@rocket.chat/ui-contexts'; -import type { AllHTMLAttributes } from 'react'; -import React from 'react'; - -import { NavbarAction } from '../../components/Navbar'; -import UserAvatarWithStatusUnstable from '../../sidebar/header/UserAvatarWithStatusUnstable'; -import UserMenu from '../../sidebar/header/UserMenu'; - -const NavbarUserAction = (props: AllHTMLAttributes) => { - const user = useUser(); - - return ( - - {user ? : } - - ); -}; - -export default NavbarUserAction; diff --git a/apps/meteor/client/navbar/index.ts b/apps/meteor/client/navbar/index.ts index 86d1b79b3ea2..902ee590de66 100644 --- a/apps/meteor/client/navbar/index.ts +++ b/apps/meteor/client/navbar/index.ts @@ -1 +1 @@ -export { default } from './Navbar'; +export { default } from './NavBar'; diff --git a/apps/meteor/client/views/root/MainLayout/LayoutWithSidebarV2.tsx b/apps/meteor/client/views/root/MainLayout/LayoutWithSidebarV2.tsx index d58d21c4c240..e2e3c46ff189 100644 --- a/apps/meteor/client/views/root/MainLayout/LayoutWithSidebarV2.tsx +++ b/apps/meteor/client/views/root/MainLayout/LayoutWithSidebarV2.tsx @@ -6,7 +6,7 @@ import React, { useEffect, useRef } from 'react'; import AccessibilityShortcut from './AccessibilityShortcut'; import { MainLayoutStyleTags } from './MainLayoutStyleTags'; -import NavBar from '../../../NavBarV2'; +import NavBar from '../../../navbar'; import Sidebar from '../../../sidebarv2'; const LayoutWithSidebarV2 = ({ children }: { children: ReactNode }): ReactElement => { From 14052579dc3dad0fe71fe219955a68555c9a278f Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Mon, 2 Dec 2024 11:56:43 -0300 Subject: [PATCH 02/24] feat: delete `client/sidebar` and rename `client/sidebarv2` to `client/sidebar` --- .../client/sidebar/Item/Condensed.stories.tsx | 2 +- apps/meteor/client/sidebar/Item/Condensed.tsx | 46 +- .../client/sidebar/Item/Extended.stories.tsx | 11 +- apps/meteor/client/sidebar/Item/Extended.tsx | 76 ++-- .../client/sidebar/Item/Medium.stories.tsx | 2 +- apps/meteor/client/sidebar/Item/Medium.tsx | 48 +-- .../client/sidebar/RoomList/RoomList.tsx | 116 ++---- .../RoomList/RoomListCollapser.tsx | 0 .../client/sidebar/RoomList/RoomListRow.tsx | 37 +- .../sidebar/RoomList/RoomListRowWrapper.tsx | 9 +- .../sidebar/RoomList/RoomListWrapper.tsx | 6 +- .../RoomList/SideBarItemTemplateWithData.tsx | 96 ++--- .../RoomList/useSidebarListNavigation.ts | 20 +- apps/meteor/client/sidebar/RoomMenu.spec.tsx | 67 --- apps/meteor/client/sidebar/RoomMenu.tsx | 22 +- .../meteor/client/sidebar/Sidebar.stories.tsx | 2 +- apps/meteor/client/sidebar/Sidebar.tsx | 41 +- apps/meteor/client/sidebar/SidebarPortal.tsx | 6 +- apps/meteor/client/sidebar/SidebarRegion.tsx | 39 +- .../footer/voip/VoipFooter.stories.tsx | 4 +- .../client/sidebar/footer/voip/VoipFooter.tsx | 8 +- .../client/sidebar/footer/voip/index.tsx | 2 +- .../CreateChannel/CreateChannelModal.tsx | 392 ------------------ .../sidebar/header/CreateChannel/index.ts | 1 - .../header/CreateChannelModal.tsx | 0 .../sidebar/header/CreateDirectMessage.tsx | 4 +- .../header/CreateTeam/CreateTeamModal.tsx | 318 -------------- .../client/sidebar/header/CreateTeam/index.ts | 1 - .../header/CreateTeamModal.tsx | 0 .../client/sidebar/header/EditStatusModal.tsx | 106 ----- apps/meteor/client/sidebar/header/Header.tsx | 71 ---- .../client/sidebar/header/HeaderUnstable.tsx | 35 -- .../FederatedRoomList.tsx | 5 +- .../FederatedRoomListErrorBoundary.tsx | 7 +- .../FederatedRoomListItem.tsx | 6 +- .../MatrixFederationManageServerModal.tsx | 15 +- .../MatrixFederationRemoveServerList.tsx | 14 +- .../MatrixFederationSearch.spec.tsx | 154 ------- .../MatrixFederationSearch.tsx | 6 +- .../MatrixFederationSearchModalContent.tsx | 9 +- .../useInfiniteFederationSearchPublicRooms.ts | 0 ...useInfiniteFederationSearchPublicRooms.tsx | 18 - .../header/SearchList.tsx | 0 .../header/SearchSection.tsx | 0 .../sidebar/header/SidebarHeaderToolbar.tsx | 13 - .../sidebar/header/UserAvatarWithStatus.tsx | 60 --- .../header/UserAvatarWithStatusUnstable.tsx | 3 - .../meteor/client/sidebar/header/UserMenu.tsx | 59 --- .../client/sidebar/header/UserMenuHeader.tsx | 44 -- .../sidebar/header/actions/Administration.tsx | 19 - .../sidebar/header/actions/CreateRoom.tsx | 4 +- .../sidebar/header/actions/Directory.tsx | 23 - .../client/sidebar/header/actions/Home.tsx | 22 - .../client/sidebar/header/actions/Login.tsx | 24 -- .../client/sidebar/header/actions/Search.tsx | 50 --- .../client/sidebar/header/actions/Sort.tsx | 6 +- .../hooks/useAdministrationItems.spec.tsx | 56 --- .../actions/hooks/useAdministrationItems.tsx | 65 --- .../actions/hooks/useAdministrationMenu.ts | 20 - .../actions/hooks/useAppsItems.spec.tsx | 287 ------------- .../header/actions/hooks/useAppsItems.tsx | 67 --- .../actions/hooks/useAuditItems.spec.tsx | 136 ------ .../header/actions/hooks/useAuditItems.tsx | 41 -- .../actions/hooks/useCreateRoomItems.tsx | 8 +- .../sidebar/header/hooks/useAccountItems.tsx | 63 --- .../header/hooks/useCreateRoomModal.tsx | 8 +- .../hooks/useCustomStatusModalHandler.tsx | 14 - .../header/hooks/useSearchItems.ts | 0 .../sidebar/header/hooks/useStatusItems.tsx | 87 ---- .../sidebar/header/hooks/useUserMenu.tsx | 50 --- .../header/hooks/useVoipItemsSection.tsx | 71 ---- apps/meteor/client/sidebar/header/index.tsx | 21 - .../sidebar/hooks/useAvatarTemplate.tsx | 4 +- .../hooks/useCollapsedGroups.ts | 0 .../client/sidebar/hooks/useQueryOptions.ts | 32 -- .../hooks/useRoomList.spec.tsx | 0 .../client/sidebar/hooks/useRoomList.ts | 165 +++++--- .../hooks/useTemplateByViewMode.ts | 0 .../sidebar/hooks/useTemplateByViewMode.tsx | 22 - .../hooks/useUnreadDisplay.spec.tsx | 0 .../hooks/useUnreadDisplay.ts | 0 apps/meteor/client/sidebar/search/Row.tsx | 10 +- .../client/sidebar/search/SearchList.tsx | 381 ----------------- .../meteor/client/sidebar/search/UserItem.tsx | 16 +- .../AirGappedRestrictionBanner.tsx | 14 +- .../AirGappedRestrictionWarning.tsx | 6 +- .../sidebar/sections/OmnichannelSection.tsx | 93 ----- .../sidebar/sections/OverMacLimitSection.tsx | 21 - .../sidebar/sections/StatusDisabledBanner.tsx | 16 +- .../actions/OmnichannelCallDialPad.tsx | 26 -- .../actions/OmnichannelCallToggle.tsx | 21 - .../actions/OmnichannelCallToggleError.tsx | 9 - .../actions/OmnichannelCallToggleLoading.tsx | 9 - .../actions/OmnichannelCallToggleReady.tsx | 63 --- .../actions/OmnichannelLivechatToggle.tsx | 34 -- .../client/sidebar/sections/actions/index.ts | 3 - .../sidebarv2/Item/Condensed.stories.tsx | 73 ---- .../client/sidebarv2/Item/Condensed.tsx | 50 --- .../sidebarv2/Item/Extended.stories.tsx | 88 ---- .../meteor/client/sidebarv2/Item/Extended.tsx | 91 ---- .../client/sidebarv2/Item/Medium.stories.tsx | 72 ---- apps/meteor/client/sidebarv2/Item/Medium.tsx | 49 --- .../client/sidebarv2/RoomList/RoomList.tsx | 72 ---- .../client/sidebarv2/RoomList/RoomListRow.tsx | 54 --- .../sidebarv2/RoomList/RoomListRowWrapper.tsx | 11 - .../sidebarv2/RoomList/RoomListWrapper.tsx | 18 - .../RoomList/SidebarItemTemplateWithData.tsx | 234 ----------- .../meteor/client/sidebarv2/RoomList/index.ts | 1 - .../RoomList/normalizeSidebarMessage.ts | 26 -- .../RoomList/useSidebarListNavigation.ts | 103 ----- apps/meteor/client/sidebarv2/RoomMenu.tsx | 223 ---------- .../client/sidebarv2/Sidebar.stories.tsx | 112 ----- apps/meteor/client/sidebarv2/Sidebar.tsx | 29 -- .../meteor/client/sidebarv2/SidebarPortal.tsx | 18 - .../meteor/client/sidebarv2/SidebarRegion.tsx | 109 ----- .../sidebarv2/badges/OmnichannelBadges.tsx | 22 - .../client/sidebarv2/footer/SidebarFooter.tsx | 19 - .../sidebarv2/footer/SidebarFooterDefault.tsx | 44 -- .../footer/SidebarFooterWatermark.tsx | 41 -- apps/meteor/client/sidebarv2/footer/index.ts | 1 - .../footer/voip/VoipFooter.stories.tsx | 130 ------ .../sidebarv2/footer/voip/VoipFooter.tsx | 179 -------- .../voip/hooks/useOmnichannelContactLabel.ts | 16 - .../client/sidebarv2/footer/voip/index.tsx | 90 ---- .../sidebarv2/header/CreateDirectMessage.tsx | 101 ----- .../FederatedRoomList.tsx | 83 ---- .../FederatedRoomListEmptyPlaceholder.tsx | 17 - .../FederatedRoomListErrorBoundary.tsx | 45 -- .../FederatedRoomListItem.tsx | 64 --- .../MatrixFederationManageServerModal.tsx | 98 ----- .../MatrixFederationRemoveServerList.tsx | 60 --- .../MatrixFederationSearch.tsx | 41 -- .../MatrixFederationSearchModalContent.tsx | 69 --- .../header/MatrixFederationSearch/index.ts | 1 - .../useMatrixServerList.ts | 10 - .../sidebarv2/header/actions/CreateRoom.tsx | 19 - .../client/sidebarv2/header/actions/Sort.tsx | 19 - .../actions/hooks/useCreateRoomItems.tsx | 68 --- .../actions/hooks/useCreateRoomMenu.tsx | 26 -- .../hooks/useGroupingListItems.spec.tsx | 25 -- .../actions/hooks/useGroupingListItems.tsx | 43 -- .../actions/hooks/useMatrixFederationItems.ts | 26 -- .../header/actions/hooks/useSortMenu.tsx | 21 - .../actions/hooks/useSortModeItems.spec.tsx | 19 - .../header/actions/hooks/useSortModeItems.tsx | 41 -- .../actions/hooks/useViewModeItems.spec.tsx | 31 -- .../header/actions/hooks/useViewModeItems.tsx | 53 --- .../header/hooks/useCreateRoomModal.tsx | 16 - .../header/hooks/useDropdownVisibility.ts | 38 -- .../hooks/useEncryptedRoomDescription.tsx | 24 -- .../sidebarv2/hooks/useAvatarTemplate.tsx | 39 -- .../sidebarv2/hooks/usePreventDefault.ts | 21 - .../client/sidebarv2/hooks/useRoomList.ts | 214 ---------- .../sidebarv2/hooks/useShortcutOpenMenu.ts | 21 - apps/meteor/client/sidebarv2/index.ts | 1 - apps/meteor/client/sidebarv2/search/Row.tsx | 40 -- .../client/sidebarv2/search/UserItem.tsx | 42 -- .../AirGappedRestrictionBanner.tsx | 23 - .../AirGappedRestrictionWarning.tsx | 27 -- .../sidebarv2/sections/BannerSection.spec.tsx | 69 --- .../sidebarv2/sections/BannerSection.tsx | 27 -- .../sections/StatusDisabledBanner.tsx | 23 - .../SidepanelItem/RoomSidepanelItem.tsx | 2 +- .../room/Sidepanel/hooks/useItemData.tsx | 6 +- .../root/MainLayout/LayoutWithSidebarV2.tsx | 2 +- 165 files changed, 406 insertions(+), 7272 deletions(-) rename apps/meteor/client/{sidebarv2 => sidebar}/RoomList/RoomListCollapser.tsx (100%) delete mode 100644 apps/meteor/client/sidebar/RoomMenu.spec.tsx delete mode 100644 apps/meteor/client/sidebar/header/CreateChannel/CreateChannelModal.tsx delete mode 100644 apps/meteor/client/sidebar/header/CreateChannel/index.ts rename apps/meteor/client/{sidebarv2 => sidebar}/header/CreateChannelModal.tsx (100%) delete mode 100644 apps/meteor/client/sidebar/header/CreateTeam/CreateTeamModal.tsx delete mode 100644 apps/meteor/client/sidebar/header/CreateTeam/index.ts rename apps/meteor/client/{sidebarv2 => sidebar}/header/CreateTeamModal.tsx (100%) delete mode 100644 apps/meteor/client/sidebar/header/EditStatusModal.tsx delete mode 100644 apps/meteor/client/sidebar/header/Header.tsx delete mode 100644 apps/meteor/client/sidebar/header/HeaderUnstable.tsx delete mode 100644 apps/meteor/client/sidebar/header/MatrixFederationSearch/MatrixFederationSearch.spec.tsx rename apps/meteor/client/{sidebarv2 => sidebar}/header/MatrixFederationSearch/useInfiniteFederationSearchPublicRooms.ts (100%) delete mode 100644 apps/meteor/client/sidebar/header/MatrixFederationSearch/useInfiniteFederationSearchPublicRooms.tsx rename apps/meteor/client/{sidebarv2 => sidebar}/header/SearchList.tsx (100%) rename apps/meteor/client/{sidebarv2 => sidebar}/header/SearchSection.tsx (100%) delete mode 100644 apps/meteor/client/sidebar/header/SidebarHeaderToolbar.tsx delete mode 100644 apps/meteor/client/sidebar/header/UserAvatarWithStatus.tsx delete mode 100644 apps/meteor/client/sidebar/header/UserAvatarWithStatusUnstable.tsx delete mode 100644 apps/meteor/client/sidebar/header/UserMenu.tsx delete mode 100644 apps/meteor/client/sidebar/header/UserMenuHeader.tsx delete mode 100644 apps/meteor/client/sidebar/header/actions/Administration.tsx delete mode 100644 apps/meteor/client/sidebar/header/actions/Directory.tsx delete mode 100644 apps/meteor/client/sidebar/header/actions/Home.tsx delete mode 100644 apps/meteor/client/sidebar/header/actions/Login.tsx delete mode 100644 apps/meteor/client/sidebar/header/actions/Search.tsx delete mode 100644 apps/meteor/client/sidebar/header/actions/hooks/useAdministrationItems.spec.tsx delete mode 100644 apps/meteor/client/sidebar/header/actions/hooks/useAdministrationItems.tsx delete mode 100644 apps/meteor/client/sidebar/header/actions/hooks/useAdministrationMenu.ts delete mode 100644 apps/meteor/client/sidebar/header/actions/hooks/useAppsItems.spec.tsx delete mode 100644 apps/meteor/client/sidebar/header/actions/hooks/useAppsItems.tsx delete mode 100644 apps/meteor/client/sidebar/header/actions/hooks/useAuditItems.spec.tsx delete mode 100644 apps/meteor/client/sidebar/header/actions/hooks/useAuditItems.tsx delete mode 100644 apps/meteor/client/sidebar/header/hooks/useAccountItems.tsx delete mode 100644 apps/meteor/client/sidebar/header/hooks/useCustomStatusModalHandler.tsx rename apps/meteor/client/{sidebarv2 => sidebar}/header/hooks/useSearchItems.ts (100%) delete mode 100644 apps/meteor/client/sidebar/header/hooks/useStatusItems.tsx delete mode 100644 apps/meteor/client/sidebar/header/hooks/useUserMenu.tsx delete mode 100644 apps/meteor/client/sidebar/header/hooks/useVoipItemsSection.tsx delete mode 100644 apps/meteor/client/sidebar/header/index.tsx rename apps/meteor/client/{sidebarv2 => sidebar}/hooks/useCollapsedGroups.ts (100%) delete mode 100644 apps/meteor/client/sidebar/hooks/useQueryOptions.ts rename apps/meteor/client/{sidebarv2 => sidebar}/hooks/useRoomList.spec.tsx (100%) rename apps/meteor/client/{sidebarv2 => sidebar}/hooks/useTemplateByViewMode.ts (100%) delete mode 100644 apps/meteor/client/sidebar/hooks/useTemplateByViewMode.tsx rename apps/meteor/client/{sidebarv2 => sidebar}/hooks/useUnreadDisplay.spec.tsx (100%) rename apps/meteor/client/{sidebarv2 => sidebar}/hooks/useUnreadDisplay.ts (100%) delete mode 100644 apps/meteor/client/sidebar/search/SearchList.tsx delete mode 100644 apps/meteor/client/sidebar/sections/OmnichannelSection.tsx delete mode 100644 apps/meteor/client/sidebar/sections/OverMacLimitSection.tsx delete mode 100644 apps/meteor/client/sidebar/sections/actions/OmnichannelCallDialPad.tsx delete mode 100644 apps/meteor/client/sidebar/sections/actions/OmnichannelCallToggle.tsx delete mode 100644 apps/meteor/client/sidebar/sections/actions/OmnichannelCallToggleError.tsx delete mode 100644 apps/meteor/client/sidebar/sections/actions/OmnichannelCallToggleLoading.tsx delete mode 100644 apps/meteor/client/sidebar/sections/actions/OmnichannelCallToggleReady.tsx delete mode 100644 apps/meteor/client/sidebar/sections/actions/OmnichannelLivechatToggle.tsx delete mode 100644 apps/meteor/client/sidebar/sections/actions/index.ts delete mode 100644 apps/meteor/client/sidebarv2/Item/Condensed.stories.tsx delete mode 100644 apps/meteor/client/sidebarv2/Item/Condensed.tsx delete mode 100644 apps/meteor/client/sidebarv2/Item/Extended.stories.tsx delete mode 100644 apps/meteor/client/sidebarv2/Item/Extended.tsx delete mode 100644 apps/meteor/client/sidebarv2/Item/Medium.stories.tsx delete mode 100644 apps/meteor/client/sidebarv2/Item/Medium.tsx delete mode 100644 apps/meteor/client/sidebarv2/RoomList/RoomList.tsx delete mode 100644 apps/meteor/client/sidebarv2/RoomList/RoomListRow.tsx delete mode 100644 apps/meteor/client/sidebarv2/RoomList/RoomListRowWrapper.tsx delete mode 100644 apps/meteor/client/sidebarv2/RoomList/RoomListWrapper.tsx delete mode 100644 apps/meteor/client/sidebarv2/RoomList/SidebarItemTemplateWithData.tsx delete mode 100644 apps/meteor/client/sidebarv2/RoomList/index.ts delete mode 100644 apps/meteor/client/sidebarv2/RoomList/normalizeSidebarMessage.ts delete mode 100644 apps/meteor/client/sidebarv2/RoomList/useSidebarListNavigation.ts delete mode 100644 apps/meteor/client/sidebarv2/RoomMenu.tsx delete mode 100644 apps/meteor/client/sidebarv2/Sidebar.stories.tsx delete mode 100644 apps/meteor/client/sidebarv2/Sidebar.tsx delete mode 100644 apps/meteor/client/sidebarv2/SidebarPortal.tsx delete mode 100644 apps/meteor/client/sidebarv2/SidebarRegion.tsx delete mode 100644 apps/meteor/client/sidebarv2/badges/OmnichannelBadges.tsx delete mode 100644 apps/meteor/client/sidebarv2/footer/SidebarFooter.tsx delete mode 100644 apps/meteor/client/sidebarv2/footer/SidebarFooterDefault.tsx delete mode 100644 apps/meteor/client/sidebarv2/footer/SidebarFooterWatermark.tsx delete mode 100644 apps/meteor/client/sidebarv2/footer/index.ts delete mode 100644 apps/meteor/client/sidebarv2/footer/voip/VoipFooter.stories.tsx delete mode 100644 apps/meteor/client/sidebarv2/footer/voip/VoipFooter.tsx delete mode 100644 apps/meteor/client/sidebarv2/footer/voip/hooks/useOmnichannelContactLabel.ts delete mode 100644 apps/meteor/client/sidebarv2/footer/voip/index.tsx delete mode 100644 apps/meteor/client/sidebarv2/header/CreateDirectMessage.tsx delete mode 100644 apps/meteor/client/sidebarv2/header/MatrixFederationSearch/FederatedRoomList.tsx delete mode 100644 apps/meteor/client/sidebarv2/header/MatrixFederationSearch/FederatedRoomListEmptyPlaceholder.tsx delete mode 100644 apps/meteor/client/sidebarv2/header/MatrixFederationSearch/FederatedRoomListErrorBoundary.tsx delete mode 100644 apps/meteor/client/sidebarv2/header/MatrixFederationSearch/FederatedRoomListItem.tsx delete mode 100644 apps/meteor/client/sidebarv2/header/MatrixFederationSearch/MatrixFederationManageServerModal.tsx delete mode 100644 apps/meteor/client/sidebarv2/header/MatrixFederationSearch/MatrixFederationRemoveServerList.tsx delete mode 100644 apps/meteor/client/sidebarv2/header/MatrixFederationSearch/MatrixFederationSearch.tsx delete mode 100644 apps/meteor/client/sidebarv2/header/MatrixFederationSearch/MatrixFederationSearchModalContent.tsx delete mode 100644 apps/meteor/client/sidebarv2/header/MatrixFederationSearch/index.ts delete mode 100644 apps/meteor/client/sidebarv2/header/MatrixFederationSearch/useMatrixServerList.ts delete mode 100644 apps/meteor/client/sidebarv2/header/actions/CreateRoom.tsx delete mode 100644 apps/meteor/client/sidebarv2/header/actions/Sort.tsx delete mode 100644 apps/meteor/client/sidebarv2/header/actions/hooks/useCreateRoomItems.tsx delete mode 100644 apps/meteor/client/sidebarv2/header/actions/hooks/useCreateRoomMenu.tsx delete mode 100644 apps/meteor/client/sidebarv2/header/actions/hooks/useGroupingListItems.spec.tsx delete mode 100644 apps/meteor/client/sidebarv2/header/actions/hooks/useGroupingListItems.tsx delete mode 100644 apps/meteor/client/sidebarv2/header/actions/hooks/useMatrixFederationItems.ts delete mode 100644 apps/meteor/client/sidebarv2/header/actions/hooks/useSortMenu.tsx delete mode 100644 apps/meteor/client/sidebarv2/header/actions/hooks/useSortModeItems.spec.tsx delete mode 100644 apps/meteor/client/sidebarv2/header/actions/hooks/useSortModeItems.tsx delete mode 100644 apps/meteor/client/sidebarv2/header/actions/hooks/useViewModeItems.spec.tsx delete mode 100644 apps/meteor/client/sidebarv2/header/actions/hooks/useViewModeItems.tsx delete mode 100644 apps/meteor/client/sidebarv2/header/hooks/useCreateRoomModal.tsx delete mode 100644 apps/meteor/client/sidebarv2/header/hooks/useDropdownVisibility.ts delete mode 100644 apps/meteor/client/sidebarv2/header/hooks/useEncryptedRoomDescription.tsx delete mode 100644 apps/meteor/client/sidebarv2/hooks/useAvatarTemplate.tsx delete mode 100644 apps/meteor/client/sidebarv2/hooks/usePreventDefault.ts delete mode 100644 apps/meteor/client/sidebarv2/hooks/useRoomList.ts delete mode 100644 apps/meteor/client/sidebarv2/hooks/useShortcutOpenMenu.ts delete mode 100644 apps/meteor/client/sidebarv2/index.ts delete mode 100644 apps/meteor/client/sidebarv2/search/Row.tsx delete mode 100644 apps/meteor/client/sidebarv2/search/UserItem.tsx delete mode 100644 apps/meteor/client/sidebarv2/sections/AirGappedRestrictionBanner/AirGappedRestrictionBanner.tsx delete mode 100644 apps/meteor/client/sidebarv2/sections/AirGappedRestrictionBanner/AirGappedRestrictionWarning.tsx delete mode 100644 apps/meteor/client/sidebarv2/sections/BannerSection.spec.tsx delete mode 100644 apps/meteor/client/sidebarv2/sections/BannerSection.tsx delete mode 100644 apps/meteor/client/sidebarv2/sections/StatusDisabledBanner.tsx diff --git a/apps/meteor/client/sidebar/Item/Condensed.stories.tsx b/apps/meteor/client/sidebar/Item/Condensed.stories.tsx index 09c1af25ba4e..7b780a0ca60a 100644 --- a/apps/meteor/client/sidebar/Item/Condensed.stories.tsx +++ b/apps/meteor/client/sidebar/Item/Condensed.stories.tsx @@ -8,7 +8,7 @@ import Condensed from './Condensed'; import * as Status from '../../components/UserStatus'; export default { - title: 'Sidebar/Condensed', + title: 'SidebarV2/Condensed', component: Condensed, args: { clickable: true, diff --git a/apps/meteor/client/sidebar/Item/Condensed.tsx b/apps/meteor/client/sidebar/Item/Condensed.tsx index cb4f047a098a..d180fe8d27fc 100644 --- a/apps/meteor/client/sidebar/Item/Condensed.tsx +++ b/apps/meteor/client/sidebar/Item/Condensed.tsx @@ -1,11 +1,11 @@ -import { IconButton, Sidebar } from '@rocket.chat/fuselage'; -import { useMutableCallback, usePrefersReducedMotion } from '@rocket.chat/fuselage-hooks'; +import { IconButton, SidebarV2Item, SidebarV2ItemAvatarWrapper, SidebarV2ItemMenu, SidebarV2ItemTitle } from '@rocket.chat/fuselage'; +import { useEffectEvent, usePrefersReducedMotion } from '@rocket.chat/fuselage-hooks'; import type { Keys as IconName } from '@rocket.chat/icons'; -import type { ReactElement } from 'react'; +import type { HTMLAttributes, ReactElement } from 'react'; import React, { memo, useState } from 'react'; type CondensedProps = { - title: ReactElement | string; + title: string; titleIcon?: ReactElement; avatar: ReactElement | boolean; icon?: IconName; @@ -17,14 +17,14 @@ type CondensedProps = { selected?: boolean; badges?: ReactElement; clickable?: boolean; -}; +} & Omit, 'is'>; -const Condensed = ({ icon, title = '', avatar, actions, href, unread, menu, badges, ...props }: CondensedProps) => { +const Condensed = ({ icon, title, avatar, actions, unread, menu, badges, ...props }: CondensedProps) => { const [menuVisibility, setMenuVisibility] = useState(!!window.DISABLE_ANIMATION); const isReduceMotionEnabled = usePrefersReducedMotion(); - const handleMenu = useMutableCallback((e) => { + const handleMenu = useEffectEvent((e) => { setMenuVisibility(e.target.offsetWidth > 0 && Boolean(menu)); }); const handleMenuEvent = { @@ -32,28 +32,18 @@ const Condensed = ({ icon, title = '', avatar, actions, href, unread, menu, badg }; return ( - - {avatar && {avatar}} - - - {icon} - - {title} - - - {badges && {badges}} - {menu && ( - - {menuVisibility ? menu() : } - - )} - - {actions && ( - - {actions} - + + {avatar && {avatar}} + {icon && icon} + {title} + {badges && badges} + {actions && actions} + {menu && ( + + {menuVisibility ? menu() : } + )} - + ); }; diff --git a/apps/meteor/client/sidebar/Item/Extended.stories.tsx b/apps/meteor/client/sidebar/Item/Extended.stories.tsx index e076370a5900..33632e900133 100644 --- a/apps/meteor/client/sidebar/Item/Extended.stories.tsx +++ b/apps/meteor/client/sidebar/Item/Extended.stories.tsx @@ -8,7 +8,7 @@ import Extended from './Extended'; import * as Status from '../../components/UserStatus'; export default { - title: 'Sidebar/Extended', + title: 'SidebarV2/Extended', component: Extended, decorators: [ (fn) => ( @@ -22,14 +22,7 @@ export default { const Template: StoryFn = (args) => ( - - John Doe - - 15:38 - - } + title='John Doe' subtitle={ diff --git a/apps/meteor/client/sidebar/Item/Extended.tsx b/apps/meteor/client/sidebar/Item/Extended.tsx index e3c3e41cdd35..d552f793adbe 100644 --- a/apps/meteor/client/sidebar/Item/Extended.tsx +++ b/apps/meteor/client/sidebar/Item/Extended.tsx @@ -1,13 +1,24 @@ -import { Sidebar, IconButton } from '@rocket.chat/fuselage'; -import { useMutableCallback, usePrefersReducedMotion } from '@rocket.chat/fuselage-hooks'; +import { + SidebarV2Item, + SidebarV2ItemAvatarWrapper, + SidebarV2ItemCol, + SidebarV2ItemRow, + SidebarV2ItemTitle, + SidebarV2ItemTimestamp, + SidebarV2ItemContent, + SidebarV2ItemMenu, + IconButton, +} from '@rocket.chat/fuselage'; +import { useEffectEvent, usePrefersReducedMotion } from '@rocket.chat/fuselage-hooks'; import type { Keys as IconName } from '@rocket.chat/icons'; +import type { HTMLAttributes } from 'react'; import React, { memo, useState } from 'react'; import { useShortTimeAgo } from '../../hooks/useTimeAgo'; type ExtendedProps = { icon?: IconName; - title?: React.ReactNode; + title: string; avatar?: React.ReactNode | boolean; actions?: React.ReactNode; href?: string; @@ -20,11 +31,11 @@ type ExtendedProps = { menuOptions?: any; titleIcon?: React.ReactNode; threadUnread?: boolean; -}; +} & Omit, 'is'>; const Extended = ({ icon, - title = '', + title, avatar, actions, href, @@ -44,45 +55,36 @@ const Extended = ({ const isReduceMotionEnabled = usePrefersReducedMotion(); - const handleMenu = useMutableCallback((e) => { + const handleMenu = useEffectEvent((e) => { setMenuVisibility(e.target.offsetWidth > 0 && Boolean(menu)); }); - const handleMenuEvent = { [isReduceMotionEnabled ? 'onMouseEnter' : 'onTransitionEnd']: handleMenu, }; return ( - - {avatar && {avatar}} - - - - {icon} - - {title} - - {time && {formatDate(time)}} - - - - - {subtitle} - {badges} - {menu && ( - - {menuVisibility ? menu() : } - - )} - - - - {actions && ( - - {actions} - - )} - + + {avatar && {avatar}} + + + + {icon && icon} + {title} + {time && {formatDate(time)}} + + + + {subtitle} + {badges && badges} + {actions && actions} + {menu && ( + + {menuVisibility ? menu() : } + + )} + + + ); }; diff --git a/apps/meteor/client/sidebar/Item/Medium.stories.tsx b/apps/meteor/client/sidebar/Item/Medium.stories.tsx index 9321aa09fdd4..939c59a631ea 100644 --- a/apps/meteor/client/sidebar/Item/Medium.stories.tsx +++ b/apps/meteor/client/sidebar/Item/Medium.stories.tsx @@ -8,7 +8,7 @@ import Medium from './Medium'; import * as Status from '../../components/UserStatus'; export default { - title: 'Sidebar/Medium', + title: 'SidebarV2/Medium', component: Medium, args: { title: 'John Doe', diff --git a/apps/meteor/client/sidebar/Item/Medium.tsx b/apps/meteor/client/sidebar/Item/Medium.tsx index fde0a20340ac..705ff53b169b 100644 --- a/apps/meteor/client/sidebar/Item/Medium.tsx +++ b/apps/meteor/client/sidebar/Item/Medium.tsx @@ -1,12 +1,14 @@ -import { Sidebar, IconButton } from '@rocket.chat/fuselage'; -import { useMutableCallback, usePrefersReducedMotion } from '@rocket.chat/fuselage-hooks'; +import { IconButton, SidebarV2Item, SidebarV2ItemAvatarWrapper, SidebarV2ItemMenu, SidebarV2ItemTitle } from '@rocket.chat/fuselage'; +import { useEffectEvent, usePrefersReducedMotion } from '@rocket.chat/fuselage-hooks'; +import type { Keys as IconName } from '@rocket.chat/icons'; +import type { HTMLAttributes } from 'react'; import React, { memo, useState } from 'react'; type MediumProps = { - title: React.ReactNode; + title: string; titleIcon?: React.ReactNode; avatar: React.ReactNode | boolean; - icon?: string; + icon?: IconName; actions?: React.ReactNode; href?: string; unread?: boolean; @@ -14,14 +16,14 @@ type MediumProps = { badges?: React.ReactNode; selected?: boolean; menuOptions?: any; -}; +} & Omit, 'is'>; -const Medium = ({ icon, title = '', avatar, actions, href, badges, unread, menu, ...props }: MediumProps) => { +const Medium = ({ icon, title, avatar, actions, badges, unread, menu, ...props }: MediumProps) => { const [menuVisibility, setMenuVisibility] = useState(!!window.DISABLE_ANIMATION); const isReduceMotionEnabled = usePrefersReducedMotion(); - const handleMenu = useMutableCallback((e) => { + const handleMenu = useEffectEvent((e) => { setMenuVisibility(e.target.offsetWidth > 0 && Boolean(menu)); }); const handleMenuEvent = { @@ -29,28 +31,18 @@ const Medium = ({ icon, title = '', avatar, actions, href, badges, unread, menu, }; return ( - - {avatar && {avatar}} - - - {icon} - - {title} - - - {badges && {badges}} - {menu && ( - - {menuVisibility ? menu() : } - - )} - - {actions && ( - - {actions} - + + {avatar} + {icon && icon} + {title} + {badges && badges} + {actions && actions} + {menu && ( + + {menuVisibility ? menu() : } + )} - + ); }; diff --git a/apps/meteor/client/sidebar/RoomList/RoomList.tsx b/apps/meteor/client/sidebar/RoomList/RoomList.tsx index 04c1fd834002..828d47c6b7e6 100644 --- a/apps/meteor/client/sidebar/RoomList/RoomList.tsx +++ b/apps/meteor/client/sidebar/RoomList/RoomList.tsx @@ -1,33 +1,32 @@ -import type { IRoom } from '@rocket.chat/core-typings'; -import { css } from '@rocket.chat/css-in-js'; import { Box } from '@rocket.chat/fuselage'; import { useResizeObserver } from '@rocket.chat/fuselage-hooks'; import { useUserPreference, useUserId } from '@rocket.chat/ui-contexts'; -import type { ReactElement } from 'react'; import React, { useMemo } from 'react'; import { useTranslation } from 'react-i18next'; -import { Virtuoso } from 'react-virtuoso'; +import { GroupedVirtuoso } from 'react-virtuoso'; +import RoomListCollapser from './RoomListCollapser'; import RoomListRow from './RoomListRow'; import RoomListRowWrapper from './RoomListRowWrapper'; import RoomListWrapper from './RoomListWrapper'; import { VirtuosoScrollbars } from '../../components/CustomScrollbars'; import { useOpenedRoom } from '../../lib/RoomManager'; import { useAvatarTemplate } from '../hooks/useAvatarTemplate'; +import { useCollapsedGroups } from '../hooks/useCollapsedGroups'; import { usePreventDefault } from '../hooks/usePreventDefault'; import { useRoomList } from '../hooks/useRoomList'; import { useShortcutOpenMenu } from '../hooks/useShortcutOpenMenu'; import { useTemplateByViewMode } from '../hooks/useTemplateByViewMode'; -const computeItemKey = (index: number, room: IRoom): IRoom['_id'] | number => room._id || index; - -const RoomList = (): ReactElement => { +const RoomList = () => { const { t } = useTranslation(); const isAnonymous = !useUserId(); - const roomsList = useRoomList(); + + const { collapsedGroups, handleClick, handleKeyDown } = useCollapsedGroups(); + const { groupsCount, groupsList, roomList, groupedUnreadInfo } = useRoomList({ collapsedGroups }); const avatarTemplate = useAvatarTemplate(); const sideBarItemTemplate = useTemplateByViewMode(); - const { ref } = useResizeObserver({ debounceDelay: 100 }); + const { ref } = useResizeObserver({ debounceDelay: 100 }); const openedRoom = useOpenedRoom() ?? ''; const sidebarViewMode = useUserPreference<'extended' | 'medium' | 'condensed'>('sidebarViewMode') || 'extended'; @@ -36,7 +35,7 @@ const RoomList = (): ReactElement => { () => ({ extended, t, - SideBarItemTemplate: sideBarItemTemplate, + SidebarItemTemplate: sideBarItemTemplate, AvatarTemplate: avatarTemplate, openedRoom, sidebarViewMode, @@ -48,87 +47,24 @@ const RoomList = (): ReactElement => { usePreventDefault(ref); useShortcutOpenMenu(ref); - const roomsListStyle = css` - position: relative; - - display: flex; - - overflow-x: hidden; - overflow-y: hidden; - - flex: 1 1 auto; - - height: 100%; - - &--embedded { - margin-top: 2rem; - } - - &__list:not(:last-child) { - margin-bottom: 22px; - } - - &__type { - display: flex; - - flex-direction: row; - - padding: 0 var(--sidebar-default-padding) 1rem var(--sidebar-default-padding); - - color: var(--rooms-list-title-color); - - font-size: var(--rooms-list-title-text-size); - align-items: center; - justify-content: space-between; - - &-text--livechat { - flex: 1; - } - } - - &__empty-room { - padding: 0 var(--sidebar-default-padding); - - color: var(--rooms-list-empty-text-color); - - font-size: var(--rooms-list-empty-text-size); - } - - &__toolbar-search { - position: absolute; - z-index: 10; - left: 0; - - overflow-y: scroll; - - height: 100%; - - background-color: var(--sidebar-background); - - padding-block-start: 12px; - } - - @media (max-width: 400px) { - padding: 0 calc(var(--sidebar-small-default-padding) - 4px); - - &__type, - &__empty-room { - padding: 0 calc(var(--sidebar-small-default-padding) - 4px) 0.5rem calc(var(--sidebar-small-default-padding) - 4px); - } - } - `; - return ( - - - } - /> - + + ( + handleClick(groupsList[index])} + onKeyDown={(e) => handleKeyDown(e, groupsList[index])} + groupTitle={groupsList[index]} + unreadCount={groupedUnreadInfo[index]} + /> + )} + {...(roomList.length > 0 && { + itemContent: (index) => roomList[index] && , + })} + components={{ Item: RoomListRowWrapper, List: RoomListWrapper, Scroller: VirtuosoScrollbars }} + /> ); }; diff --git a/apps/meteor/client/sidebarv2/RoomList/RoomListCollapser.tsx b/apps/meteor/client/sidebar/RoomList/RoomListCollapser.tsx similarity index 100% rename from apps/meteor/client/sidebarv2/RoomList/RoomListCollapser.tsx rename to apps/meteor/client/sidebar/RoomList/RoomListCollapser.tsx diff --git a/apps/meteor/client/sidebar/RoomList/RoomListRow.tsx b/apps/meteor/client/sidebar/RoomList/RoomListRow.tsx index 481299acdb8e..473fad9b0e42 100644 --- a/apps/meteor/client/sidebar/RoomList/RoomListRow.tsx +++ b/apps/meteor/client/sidebar/RoomList/RoomListRow.tsx @@ -1,26 +1,27 @@ import type { IRoom, ISubscription } from '@rocket.chat/core-typings'; -import { SidebarSection } from '@rocket.chat/fuselage'; import type { TFunction } from 'i18next'; -import type { ReactElement } from 'react'; import React, { memo, useMemo } from 'react'; -import SideBarItemTemplateWithData from './SideBarItemTemplateWithData'; +import SidebarItemTemplateWithData from './SidebarItemTemplateWithData'; import { useVideoConfAcceptCall, useVideoConfRejectIncomingCall, useVideoConfIncomingCalls } from '../../contexts/VideoConfContext'; import type { useAvatarTemplate } from '../hooks/useAvatarTemplate'; import type { useTemplateByViewMode } from '../hooks/useTemplateByViewMode'; type RoomListRowProps = { - extended: boolean; - t: TFunction; - SideBarItemTemplate: ReturnType; - AvatarTemplate: ReturnType; - openedRoom: string; - sidebarViewMode: 'extended' | 'condensed' | 'medium'; - isAnonymous: boolean; + data: { + extended: boolean; + t: TFunction; + SidebarItemTemplate: ReturnType; + AvatarTemplate: ReturnType; + openedRoom: string; + sidebarViewMode: 'extended' | 'condensed' | 'medium'; + isAnonymous: boolean; + }; + item: ISubscription & IRoom; }; -const RoomListRow = ({ data, item }: { data: RoomListRowProps; item: ISubscription & IRoom }): ReactElement => { - const { extended, t, SideBarItemTemplate, AvatarTemplate, openedRoom, sidebarViewMode } = data; +const RoomListRow = ({ data, item }: RoomListRowProps) => { + const { extended, t, SidebarItemTemplate, AvatarTemplate, openedRoom, sidebarViewMode } = data; const acceptCall = useVideoConfAcceptCall(); const rejectCall = useVideoConfRejectIncomingCall(); @@ -36,22 +37,14 @@ const RoomListRow = ({ data, item }: { data: RoomListRowProps; item: ISubscripti [acceptCall, rejectCall, currentCall], ); - if (typeof item === 'string') { - return ( - - {t(item)} - - ); - } - return ( - diff --git a/apps/meteor/client/sidebar/RoomList/RoomListRowWrapper.tsx b/apps/meteor/client/sidebar/RoomList/RoomListRowWrapper.tsx index e2c8f90b6953..a848c74ad1d5 100644 --- a/apps/meteor/client/sidebar/RoomList/RoomListRowWrapper.tsx +++ b/apps/meteor/client/sidebar/RoomList/RoomListRowWrapper.tsx @@ -1,8 +1,11 @@ -import type { HTMLAttributes, Ref } from 'react'; +import { SidebarV2ListItem } from '@rocket.chat/fuselage'; +import type { ForwardedRef, HTMLAttributes } from 'react'; import React, { forwardRef } from 'react'; -const RoomListRoomWrapper = forwardRef(function RoomListRoomWrapper(props: HTMLAttributes, ref: Ref) { - return
; +type RoomListRoomWrapperProps = HTMLAttributes; + +const RoomListRoomWrapper = forwardRef(function RoomListRoomWrapper(props: RoomListRoomWrapperProps, ref: ForwardedRef) { + return ; }); export default RoomListRoomWrapper; diff --git a/apps/meteor/client/sidebar/RoomList/RoomListWrapper.tsx b/apps/meteor/client/sidebar/RoomList/RoomListWrapper.tsx index 791c2189ec6b..09e80f12765c 100644 --- a/apps/meteor/client/sidebar/RoomList/RoomListWrapper.tsx +++ b/apps/meteor/client/sidebar/RoomList/RoomListWrapper.tsx @@ -1,11 +1,13 @@ import { useMergedRefs } from '@rocket.chat/fuselage-hooks'; -import type { HTMLAttributes, Ref } from 'react'; +import type { ForwardedRef, HTMLAttributes } from 'react'; import React, { forwardRef } from 'react'; import { useTranslation } from 'react-i18next'; import { useSidebarListNavigation } from './useSidebarListNavigation'; -const RoomListWrapper = forwardRef(function RoomListWrapper(props: HTMLAttributes, ref: Ref) { +type RoomListWrapperProps = HTMLAttributes; + +const RoomListWrapper = forwardRef(function RoomListWrapper(props: RoomListWrapperProps, ref: ForwardedRef) { const { t } = useTranslation(); const { sidebarListRef } = useSidebarListNavigation(); const mergedRefs = useMergedRefs(ref, sidebarListRef); diff --git a/apps/meteor/client/sidebar/RoomList/SideBarItemTemplateWithData.tsx b/apps/meteor/client/sidebar/RoomList/SideBarItemTemplateWithData.tsx index b2129efc516a..5417d3075c1e 100644 --- a/apps/meteor/client/sidebar/RoomList/SideBarItemTemplateWithData.tsx +++ b/apps/meteor/client/sidebar/RoomList/SideBarItemTemplateWithData.tsx @@ -1,6 +1,6 @@ import type { IMessage, IRoom, ISubscription } from '@rocket.chat/core-typings'; import { isDirectMessageRoom, isMultipleDirectMessageRoom, isOmnichannelRoom, isVideoConfMessage } from '@rocket.chat/core-typings'; -import { Badge, Sidebar, SidebarItemAction, SidebarItemActions, Margins } from '@rocket.chat/fuselage'; +import { SidebarV2Action, SidebarV2Actions, SidebarV2ItemBadge, SidebarV2ItemIcon } from '@rocket.chat/fuselage'; import { useLayout } from '@rocket.chat/ui-contexts'; import type { TFunction } from 'i18next'; import type { AllHTMLAttributes, ComponentType, ReactElement, ReactNode } from 'react'; @@ -14,8 +14,9 @@ import { useOmnichannelPriorities } from '../../omnichannel/hooks/useOmnichannel import RoomMenu from '../RoomMenu'; import { OmnichannelBadges } from '../badges/OmnichannelBadges'; import type { useAvatarTemplate } from '../hooks/useAvatarTemplate'; +import { useUnreadDisplay } from '../hooks/useUnreadDisplay'; -const getMessage = (room: IRoom, lastMessage: IMessage | undefined, t: TFunction): string | undefined => { +export const getMessage = (room: IRoom, lastMessage: IMessage | undefined, t: TFunction): string | undefined => { if (!lastMessage) { return t('No_messages_yet'); } @@ -34,28 +35,10 @@ const getMessage = (room: IRoom, lastMessage: IMessage | undefined, t: TFunction return `${lastMessage.u.name || lastMessage.u.username}: ${normalizeSidebarMessage(lastMessage, t)}`; }; -const getBadgeTitle = (userMentions: number, threadUnread: number, groupMentions: number, unread: number, t: TFunction) => { - const title = [] as string[]; - if (userMentions) { - title.push(t('mentions_counter', { count: userMentions })); - } - if (threadUnread) { - title.push(t('threads_counter', { count: threadUnread })); - } - if (groupMentions) { - title.push(t('group_mentions_counter', { count: groupMentions })); - } - const count = unread - userMentions - groupMentions; - if (count > 0) { - title.push(t('unread_messages_counter', { count })); - } - return title.join(', '); -}; - type RoomListRowProps = { extended: boolean; t: TFunction; - SideBarItemTemplate: ComponentType< + SidebarItemTemplate: ComponentType< { icon: ReactNode; title: ReactNode; @@ -92,53 +75,41 @@ type RoomListRowProps = { }; }; -function SideBarItemTemplateWithData({ +const SidebarItemTemplateWithData = ({ room, id, selected, style, extended, - SideBarItemTemplate, + SidebarItemTemplate, AvatarTemplate, t, isAnonymous, videoConfActions, -}: RoomListRowProps): ReactElement { +}: RoomListRowProps) => { const { sidebar } = useLayout(); const href = roomCoordinator.getRouteLink(room.t, room) || ''; const title = roomCoordinator.getRoomName(room.t, room) || ''; - const { - lastMessage, - hideUnreadStatus, - hideMentionStatus, - unread = 0, - alert, - userMentions, - groupMentions, - tunread = [], - tunreadUser = [], - rid, - t: type, - cl, - } = room; + const { unreadTitle, unreadVariant, showUnread, unreadCount, highlightUnread: highlighted } = useUnreadDisplay(room); + + const { lastMessage, unread = 0, alert, rid, t: type, cl } = room; - const highlighted = Boolean(!hideUnreadStatus && (alert || unread)); const icon = ( - // TODO: Remove icon='at' - - - + } + /> ); const actions = useMemo( () => videoConfActions && ( - - - - + + + + ), [videoConfActions], ); @@ -149,28 +120,19 @@ function SideBarItemTemplateWithData({ const message = extended && getMessage(room, lastMessage, t); const subtitle = message ? : null; - const threadUnread = tunread.length > 0; - const variant = - ((userMentions || tunreadUser.length) && 'danger') || (threadUnread && 'primary') || (groupMentions && 'warning') || 'secondary'; - - const isUnread = unread > 0 || threadUnread; - const showBadge = !hideUnreadStatus || (!hideMentionStatus && (Boolean(userMentions) || tunreadUser.length > 0)); - - const badgeTitle = getBadgeTitle(userMentions, tunread.length, groupMentions, unread, t); - const badges = ( - - {showBadge && isUnread && ( - - {unread + tunread?.length} - + <> + {showUnread && ( + + {unreadCount.total} + )} {isOmnichannelRoom(room) && } - + ); return ( - ( 0} rid={rid} unread={!!unread} roomOpen={selected} @@ -210,7 +172,7 @@ function SideBarItemTemplateWithData({ } /> ); -} +}; function safeDateNotEqualCheck(a: Date | string | undefined, b: Date | string | undefined): boolean { if (!a || !b) { @@ -224,7 +186,7 @@ const keys: (keyof RoomListRowProps)[] = [ 'style', 'extended', 'selected', - 'SideBarItemTemplate', + 'SidebarItemTemplate', 'AvatarTemplate', 't', 'sidebarViewMode', @@ -232,7 +194,7 @@ const keys: (keyof RoomListRowProps)[] = [ ]; // eslint-disable-next-line react/no-multi-comp -export default memo(SideBarItemTemplateWithData, (prevProps, nextProps) => { +export default memo(SidebarItemTemplateWithData, (prevProps, nextProps) => { if (keys.some((key) => prevProps[key] !== nextProps[key])) { return false; } diff --git a/apps/meteor/client/sidebar/RoomList/useSidebarListNavigation.ts b/apps/meteor/client/sidebar/RoomList/useSidebarListNavigation.ts index f5c2d00d4b2c..d2482aca65ed 100644 --- a/apps/meteor/client/sidebar/RoomList/useSidebarListNavigation.ts +++ b/apps/meteor/client/sidebar/RoomList/useSidebarListNavigation.ts @@ -1,8 +1,9 @@ import { useFocusManager } from '@react-aria/focus'; import { useCallback } from 'react'; -const isListItem = (node: EventTarget) => (node as HTMLElement).classList.contains('rcx-sidebar-item'); -const isListItemMenu = (node: EventTarget) => (node as HTMLElement).classList.contains('rcx-sidebar-item__menu'); +const isListItem = (node: EventTarget) => (node as HTMLElement).classList.contains('rcx-sidebar-v2-item'); +const isCollapseGroup = (node: EventTarget) => (node as HTMLElement).classList.contains('rcx-sidebar-v2-collapse-group__bar'); +const isListItemMenu = (node: EventTarget) => (node as HTMLElement).classList.contains('rcx-sidebar-v2-item__menu'); /** * Custom hook to provide the sidebar navigation by keyboard. @@ -24,7 +25,7 @@ export const useSidebarListNavigation = () => { return; } - if (!isListItem(e.target)) { + if (!isListItem(e.target) && !isCollapseGroup(e.target)) { return; } @@ -34,26 +35,29 @@ export const useSidebarListNavigation = () => { if (e.shiftKey) { sidebarListFocusManager.focusPrevious({ - accept: (node) => !isListItem(node) && !isListItemMenu(node), + accept: (node) => !isListItem(node) && !isListItemMenu(node) && !isCollapseGroup(node), }); } else if (isListItemMenu(e.target)) { sidebarListFocusManager.focusNext({ - accept: (node) => !isListItem(node) && !isListItemMenu(node), + accept: (node) => !isListItem(node) && !isListItemMenu(node) && !isCollapseGroup(node), }); } else { sidebarListFocusManager.focusNext({ - accept: (node) => !isListItem(node), + accept: (node) => !isListItem(node) && !isCollapseGroup(node), }); } } if (e.key === 'ArrowUp' || e.key === 'ArrowDown') { + e.preventDefault(); + e.stopPropagation(); + if (e.key === 'ArrowUp') { - sidebarListFocusManager.focusPrevious({ accept: (node) => isListItem(node) }); + sidebarListFocusManager.focusPrevious({ accept: (node) => isListItem(node) || isCollapseGroup(node) }); } if (e.key === 'ArrowDown') { - sidebarListFocusManager.focusNext({ accept: (node) => isListItem(node) }); + sidebarListFocusManager.focusNext({ accept: (node) => isListItem(node) || isCollapseGroup(node) }); } lastItemFocused = document.activeElement as HTMLElement; diff --git a/apps/meteor/client/sidebar/RoomMenu.spec.tsx b/apps/meteor/client/sidebar/RoomMenu.spec.tsx deleted file mode 100644 index e12063c9cdb0..000000000000 --- a/apps/meteor/client/sidebar/RoomMenu.spec.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import type { RoomType } from '@rocket.chat/core-typings'; -import { mockAppRoot } from '@rocket.chat/mock-providers'; -import { render, screen } from '@testing-library/react'; -import '@testing-library/jest-dom'; -import userEvent from '@testing-library/user-event'; -import React from 'react'; - -import RoomMenu from './RoomMenu'; - -jest.mock('../../client/lib/rooms/roomCoordinator', () => ({ - roomCoordinator: { - getRoomDirectives: () => ({ - getUiText: () => 'leaveWarning', - }), - }, -})); - -jest.mock('../../app/ui-utils/client', () => ({ - LegacyRoomManager: { - close: jest.fn(), - }, -})); - -const defaultProps = { - rid: 'roomId', - type: 'c' as RoomType, - hideDefaultOptions: false, - placement: 'right-start', -}; - -const renderOptions = { - wrapper: mockAppRoot() - .withTranslations('en', 'core', { - Hide: 'Hide', - Mark_unread: 'Mark Unread', - Favorite: 'Favorite', - Leave_room: 'Leave', - }) - .withSetting('Favorite_Rooms', true) - .withPermission('leave-c') - .withPermission('leave-p') - .build(), - legacyRoot: true, -}; - -it('should display all the menu options for regular rooms', async () => { - render(, renderOptions); - - const menu = screen.queryByRole('button'); - await userEvent.click(menu as HTMLElement); - - expect(await screen.findByRole('option', { name: 'Hide' })).toBeInTheDocument(); - expect(await screen.findByRole('option', { name: 'Favorite' })).toBeInTheDocument(); - expect(await screen.findByRole('option', { name: 'Mark Unread' })).toBeInTheDocument(); - expect(await screen.findByRole('option', { name: 'Leave' })).toBeInTheDocument(); -}); - -it('should display only mark unread and favorite for omnichannel rooms', async () => { - render(, renderOptions); - - const menu = screen.queryByRole('button'); - await userEvent.click(menu as HTMLElement); - - expect(await screen.findAllByRole('option')).toHaveLength(2); - expect(screen.queryByRole('option', { name: 'Hide' })).not.toBeInTheDocument(); - expect(screen.queryByRole('option', { name: 'Leave' })).not.toBeInTheDocument(); -}); diff --git a/apps/meteor/client/sidebar/RoomMenu.tsx b/apps/meteor/client/sidebar/RoomMenu.tsx index 4e20baf8929a..0c593afd683c 100644 --- a/apps/meteor/client/sidebar/RoomMenu.tsx +++ b/apps/meteor/client/sidebar/RoomMenu.tsx @@ -1,6 +1,6 @@ import type { RoomType } from '@rocket.chat/core-typings'; import { Option, Menu } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import type { TranslationKey, Fields } from '@rocket.chat/ui-contexts'; import { useRouter, @@ -66,7 +66,7 @@ const RoomMenu = ({ const dispatchToastMessage = useToastMessageDispatch(); const setModal = useSetModal(); - const closeModal = useMutableCallback(() => setModal()); + const closeModal = useEffectEvent(() => setModal()); const router = useRouter(); @@ -102,7 +102,7 @@ const RoomMenu = ({ return !((cl != null && !cl) || ['d', 'l'].includes(type)); })(); - const handleLeave = useMutableCallback(() => { + const handleLeave = useEffectEvent(() => { const leave = async (): Promise => { try { await leaveRoom({ roomId: rid }); @@ -129,7 +129,7 @@ const RoomMenu = ({ ); }); - const handleToggleRead = useMutableCallback(async () => { + const handleToggleRead = useEffectEvent(async () => { try { queryClient.invalidateQueries(['sidebar/search/spotlight']); @@ -152,7 +152,7 @@ const RoomMenu = ({ } }); - const handleToggleFavorite = useMutableCallback(async () => { + const handleToggleFavorite = useEffectEvent(async () => { try { await toggleFavorite({ roomId: rid, favorite: !isFavorite }); } catch (error) { @@ -163,14 +163,10 @@ const RoomMenu = ({ const menuOptions = useMemo( () => ({ ...(!hideDefaultOptions && { - ...(isOmnichannelRoom - ? {} - : { - hideRoom: { - label: { label: t('Hide'), icon: 'eye-off' }, - action: handleHide, - }, - }), + hideRoom: { + label: { label: t('Hide'), icon: 'eye-off' }, + action: handleHide, + }, toggleRead: { label: { label: isUnread ? t('Mark_read') : t('Mark_unread'), icon: 'flag' }, action: handleToggleRead, diff --git a/apps/meteor/client/sidebar/Sidebar.stories.tsx b/apps/meteor/client/sidebar/Sidebar.stories.tsx index c48136ef653b..deccac024997 100644 --- a/apps/meteor/client/sidebar/Sidebar.stories.tsx +++ b/apps/meteor/client/sidebar/Sidebar.stories.tsx @@ -9,7 +9,7 @@ import React from 'react'; import Sidebar from './SidebarRegion'; export default { - title: 'Sidebar', + title: 'SidebarV2', component: Sidebar, } satisfies Meta; diff --git a/apps/meteor/client/sidebar/Sidebar.tsx b/apps/meteor/client/sidebar/Sidebar.tsx index 541afdfe0bee..8038bf8b1238 100644 --- a/apps/meteor/client/sidebar/Sidebar.tsx +++ b/apps/meteor/client/sidebar/Sidebar.tsx @@ -1,49 +1,28 @@ -import { css } from '@rocket.chat/css-in-js'; -import { Box } from '@rocket.chat/fuselage'; -import { useLayout, useUserPreference } from '@rocket.chat/ui-contexts'; +import { SidebarV2 } from '@rocket.chat/fuselage'; +import { useUserPreference } from '@rocket.chat/ui-contexts'; import React, { memo } from 'react'; import SidebarRoomList from './RoomList'; import SidebarFooter from './footer'; -import SidebarHeader from './header'; +import SearchSection from './header/SearchSection'; import BannerSection from './sections/BannerSection'; -import OmnichannelSection from './sections/OmnichannelSection'; -import { useOmnichannelEnabled } from '../hooks/omnichannel/useOmnichannelEnabled'; -// TODO unit test airgappedbanner const Sidebar = () => { - const showOmnichannel = useOmnichannelEnabled(); - const sidebarViewMode = useUserPreference('sidebarViewMode'); const sidebarHideAvatar = !useUserPreference('sidebarDisplayAvatar'); - const { sidebar } = useLayout(); - - const sidebarLink = css` - a { - text-decoration: none; - } - `; return ( - - + - {showOmnichannel && } - + ); }; diff --git a/apps/meteor/client/sidebar/SidebarPortal.tsx b/apps/meteor/client/sidebar/SidebarPortal.tsx index 6046c180ec3a..fc23fdf4dbff 100644 --- a/apps/meteor/client/sidebar/SidebarPortal.tsx +++ b/apps/meteor/client/sidebar/SidebarPortal.tsx @@ -3,9 +3,7 @@ import type { ReactNode } from 'react'; import React, { memo } from 'react'; import { createPortal } from 'react-dom'; -type SidebarPortalProps = { - children?: ReactNode; -}; +type SidebarPortalProps = { children?: ReactNode }; const SidebarPortal = ({ children }: SidebarPortalProps) => { const sidebarRoot = document.getElementById('sidebar-region'); @@ -17,4 +15,4 @@ const SidebarPortal = ({ children }: SidebarPortalProps) => { return <>{createPortal({children}, sidebarRoot)}; }; -export default memo(SidebarPortal); +export default memo(SidebarPortal); diff --git a/apps/meteor/client/sidebar/SidebarRegion.tsx b/apps/meteor/client/sidebar/SidebarRegion.tsx index c3663bb7d359..5bd4d0c1a6d8 100644 --- a/apps/meteor/client/sidebar/SidebarRegion.tsx +++ b/apps/meteor/client/sidebar/SidebarRegion.tsx @@ -1,14 +1,11 @@ import { css } from '@rocket.chat/css-in-js'; import { Box } from '@rocket.chat/fuselage'; -import { FeaturePreview, FeaturePreviewOff, FeaturePreviewOn } from '@rocket.chat/ui-client'; import { useLayout } from '@rocket.chat/ui-contexts'; -import React, { lazy, memo } from 'react'; +import React, { memo } from 'react'; import { FocusScope } from 'react-aria'; import Sidebar from './Sidebar'; -const Navbar = lazy(() => import('../navbar/Navbar')); - const SidebarRegion = () => { const { isMobile, sidebar } = useLayout(); @@ -93,29 +90,19 @@ const SidebarRegion = () => { `; return ( - <> - - - - - - <> - - - - - - - {isMobile && ( - sidebar.toggle()}> + + - + > + + + {isMobile && ( + sidebar.toggle()}> + )} + ); }; diff --git a/apps/meteor/client/sidebar/footer/voip/VoipFooter.stories.tsx b/apps/meteor/client/sidebar/footer/voip/VoipFooter.stories.tsx index 86391d5329a9..eefa4b48f993 100644 --- a/apps/meteor/client/sidebar/footer/voip/VoipFooter.stories.tsx +++ b/apps/meteor/client/sidebar/footer/voip/VoipFooter.stories.tsx @@ -3,7 +3,7 @@ import { Box, Icon } from '@rocket.chat/fuselage'; import type { StoryFn } from '@storybook/react'; import React, { useState } from 'react'; -import { VoipFooter } from './VoipFooter'; +import VoipFooter from './VoipFooter'; const callActions = { mute: () => ({}), @@ -22,7 +22,7 @@ const callerDefault = { }; export default { - title: 'Sidebar/Footer/VoipFooter', + title: 'SidebarV2/Footer/VoipFooter', component: VoipFooter, parameters: { controls: { expanded: true }, diff --git a/apps/meteor/client/sidebar/footer/voip/VoipFooter.tsx b/apps/meteor/client/sidebar/footer/voip/VoipFooter.tsx index c9145a8a1210..80154f307dd6 100644 --- a/apps/meteor/client/sidebar/footer/voip/VoipFooter.tsx +++ b/apps/meteor/client/sidebar/footer/voip/VoipFooter.tsx @@ -10,7 +10,7 @@ import { useOmnichannelContactLabel } from './hooks/useOmnichannelContactLabel'; import type { CallActionsType } from '../../../contexts/CallContext'; import type { VoipFooterMenuOptions } from '../../../hooks/useVoipFooterMenu'; -type VoipFooterPropsType = { +type VoipFooterProps = { caller: ICallerInfo; callerState: VoIpCallerInfo['state']; callActions: CallActionsType; @@ -30,7 +30,7 @@ type VoipFooterPropsType = { options: VoipFooterMenuOptions; }; -export const VoipFooter = ({ +const VoipFooter = ({ caller, callerState, callActions, @@ -48,7 +48,7 @@ export const VoipFooter = ({ isEnterprise = false, children, options, -}: VoipFooterPropsType): ReactElement => { +}: VoipFooterProps): ReactElement => { const contactLabel = useOmnichannelContactLabel(caller); const { t } = useTranslation(); @@ -175,3 +175,5 @@ export const VoipFooter = ({ ); }; + +export default VoipFooter; diff --git a/apps/meteor/client/sidebar/footer/voip/index.tsx b/apps/meteor/client/sidebar/footer/voip/index.tsx index b7b9755f5eb9..0fd0d29ee910 100644 --- a/apps/meteor/client/sidebar/footer/voip/index.tsx +++ b/apps/meteor/client/sidebar/footer/voip/index.tsx @@ -16,7 +16,7 @@ import { } from '../../../contexts/CallContext'; import { useVoipFooterMenu } from '../../../hooks/useVoipFooterMenu'; import SidebarFooterDefault from '../SidebarFooterDefault'; -import { VoipFooter as VoipFooterComponent } from './VoipFooter'; +import VoipFooterComponent from './VoipFooter'; export const VoipFooter = (): ReactElement | null => { const { t } = useTranslation(); diff --git a/apps/meteor/client/sidebar/header/CreateChannel/CreateChannelModal.tsx b/apps/meteor/client/sidebar/header/CreateChannel/CreateChannelModal.tsx deleted file mode 100644 index 995c3646888e..000000000000 --- a/apps/meteor/client/sidebar/header/CreateChannel/CreateChannelModal.tsx +++ /dev/null @@ -1,392 +0,0 @@ -import type { IRoom } from '@rocket.chat/core-typings'; -import { - Box, - Modal, - Button, - TextInput, - Icon, - Field, - ToggleSwitch, - FieldGroup, - FieldLabel, - FieldRow, - FieldError, - FieldHint, - FieldDescription, - Accordion, - AccordionItem, -} from '@rocket.chat/fuselage'; -import { useUniqueId } from '@rocket.chat/fuselage-hooks'; -import type { TranslationKey } from '@rocket.chat/ui-contexts'; -import { - useSetting, - useTranslation, - useEndpoint, - usePermission, - useToastMessageDispatch, - usePermissionWithScopedRoles, -} from '@rocket.chat/ui-contexts'; -import type { ComponentProps, ReactElement } from 'react'; -import React, { useEffect, useMemo } from 'react'; -import { useForm, Controller } from 'react-hook-form'; - -import UserAutoCompleteMultipleFederated from '../../../components/UserAutoCompleteMultiple/UserAutoCompleteMultipleFederated'; -import { useHasLicenseModule } from '../../../hooks/useHasLicenseModule'; -import { goToRoomById } from '../../../lib/utils/goToRoomById'; -import { useEncryptedRoomDescription } from '../hooks/useEncryptedRoomDescription'; - -type CreateChannelModalProps = { - teamId?: string; - mainRoom?: IRoom; - onClose: () => void; - reload?: () => void; -}; - -type CreateChannelModalPayload = { - name: string; - isPrivate: boolean; - topic?: string; - members: string[]; - readOnly: boolean; - encrypted: boolean; - broadcast: boolean; - federated: boolean; -}; - -const getFederationHintKey = (licenseModule: ReturnType, featureToggle: boolean): TranslationKey => { - if (licenseModule === 'loading' || !licenseModule) { - return 'error-this-is-a-premium-feature'; - } - if (!featureToggle) { - return 'Federation_Matrix_Federated_Description_disabled'; - } - return 'Federation_Matrix_Federated_Description'; -}; - -const CreateChannelModal = ({ teamId = '', mainRoom, onClose, reload }: CreateChannelModalProps): ReactElement => { - const t = useTranslation(); - const canSetReadOnly = usePermissionWithScopedRoles('set-readonly', ['owner']); - const e2eEnabled = useSetting('E2E_Enable'); - const namesValidation = useSetting('UTF8_Channel_Names_Validation'); - const allowSpecialNames = useSetting('UI_Allow_room_names_with_special_chars'); - const federationEnabled = useSetting('Federation_Matrix_enabled', false); - const e2eEnabledForPrivateByDefault = useSetting('E2E_Enabled_Default_PrivateRooms') && e2eEnabled; - - const canCreateChannel = usePermission('create-c'); - const canCreateGroup = usePermission('create-p'); - const getEncryptedHint = useEncryptedRoomDescription('channel'); - - const channelNameRegex = useMemo(() => new RegExp(`^${namesValidation}$`), [namesValidation]); - const federatedModule = useHasLicenseModule('federation'); - const canUseFederation = federatedModule !== 'loading' && federatedModule && federationEnabled; - - const channelNameExists = useEndpoint('GET', '/v1/rooms.nameExists'); - const createChannel = useEndpoint('POST', '/v1/channels.create'); - const createPrivateChannel = useEndpoint('POST', '/v1/groups.create'); - - const canCreateTeamChannel = usePermission('create-team-channel', mainRoom?._id); - const canCreateTeamGroup = usePermission('create-team-group', mainRoom?._id); - - const dispatchToastMessage = useToastMessageDispatch(); - - const canOnlyCreateOneType = useMemo(() => { - if ((!teamId && !canCreateChannel && canCreateGroup) || (teamId && !canCreateTeamChannel && canCreateTeamGroup)) { - return 'p'; - } - if ((!teamId && canCreateChannel && !canCreateGroup) || (teamId && canCreateTeamChannel && !canCreateTeamGroup)) { - return 'c'; - } - return false; - }, [canCreateChannel, canCreateGroup, canCreateTeamChannel, canCreateTeamGroup, teamId]); - - const { - register, - formState: { errors }, - handleSubmit, - control, - setValue, - watch, - } = useForm({ - mode: 'onBlur', - defaultValues: { - members: [], - name: '', - topic: '', - isPrivate: canOnlyCreateOneType ? canOnlyCreateOneType === 'p' : true, - readOnly: false, - encrypted: (e2eEnabledForPrivateByDefault as boolean) ?? false, - broadcast: false, - federated: false, - }, - }); - - const { isPrivate, broadcast, readOnly, federated, encrypted } = watch(); - - useEffect(() => { - if (!isPrivate) { - setValue('encrypted', false); - } - - if (broadcast) { - setValue('encrypted', false); - } - - if (federated) { - // if room is federated, it cannot be encrypted or broadcast or readOnly - setValue('encrypted', false); - setValue('broadcast', false); - setValue('readOnly', false); - } - - setValue('readOnly', broadcast); - }, [federated, setValue, broadcast, isPrivate]); - - const validateChannelName = async (name: string): Promise => { - if (!name) { - return; - } - - if (!allowSpecialNames && !channelNameRegex.test(name)) { - return t('Name_cannot_have_special_characters'); - } - - const { exists } = await channelNameExists({ roomName: name }); - if (exists) { - return t('Channel_already_exist', name); - } - }; - - const handleCreateChannel = async ({ name, members, readOnly, topic, broadcast, encrypted, federated }: CreateChannelModalPayload) => { - let roomData; - const params = { - name, - members, - readOnly, - extraData: { - topic, - broadcast, - encrypted, - ...(federated && { federated }), - ...(teamId && { teamId }), - }, - }; - - try { - if (isPrivate) { - roomData = await createPrivateChannel(params); - !teamId && goToRoomById(roomData.group._id); - } else { - roomData = await createChannel(params); - !teamId && goToRoomById(roomData.channel._id); - } - - dispatchToastMessage({ type: 'success', message: t('Room_has_been_created') }); - reload?.(); - } catch (error) { - dispatchToastMessage({ type: 'error', message: error }); - } finally { - onClose(); - } - }; - - const e2eDisabled = useMemo( - () => !isPrivate || broadcast || Boolean(!e2eEnabled) || Boolean(e2eEnabledForPrivateByDefault), - [e2eEnabled, e2eEnabledForPrivateByDefault, broadcast, isPrivate], - ); - - const createChannelFormId = useUniqueId(); - const nameId = useUniqueId(); - const topicId = useUniqueId(); - const privateId = useUniqueId(); - const federatedId = useUniqueId(); - const readOnlyId = useUniqueId(); - const encryptedId = useUniqueId(); - const broadcastId = useUniqueId(); - const addMembersId = useUniqueId(); - - return ( - ) => ( - - )} - > - - {t('Create_channel')} - - - - - - - {t('Name')} - - - validateChannelName(value), - })} - error={errors.name?.message} - addon={} - aria-invalid={errors.name ? 'true' : 'false'} - aria-describedby={`${nameId}-error ${nameId}-hint`} - aria-required='true' - /> - - {errors.name && ( - - {errors.name.message} - - )} - {!allowSpecialNames && {t('No_spaces')}} - - - {t('Topic')} - - - - {t('Displayed_next_to_name')} - - - {t('Members')} - ( - - )} - /> - - - - {t('Private')} - ( - - )} - /> - - - {isPrivate ? t('People_can_only_join_by_being_invited') : t('Anyone_can_access')} - - - - - - - - {t('Security_and_permissions')} - - - - {t('Federation_Matrix_Federated')} - ( - - )} - /> - - {t(getFederationHintKey(federatedModule, federationEnabled))} - - - - {t('Encrypted')} - ( - - )} - /> - - {getEncryptedHint({ isPrivate, broadcast, encrypted })} - - - - {t('Read_only')} - ( - - )} - /> - - - {readOnly ? t('Read_only_field_hint_enabled', { roomType: 'channel' }) : t('Anyone_can_send_new_messages')} - - - - - {t('Broadcast')} - ( - - )} - /> - - {broadcast && {t('Broadcast_hint_enabled', { roomType: 'channel' })}} - - - - - - - - - - - - - ); -}; - -export default CreateChannelModal; diff --git a/apps/meteor/client/sidebar/header/CreateChannel/index.ts b/apps/meteor/client/sidebar/header/CreateChannel/index.ts deleted file mode 100644 index a1b32eb160a5..000000000000 --- a/apps/meteor/client/sidebar/header/CreateChannel/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './CreateChannelModal'; diff --git a/apps/meteor/client/sidebarv2/header/CreateChannelModal.tsx b/apps/meteor/client/sidebar/header/CreateChannelModal.tsx similarity index 100% rename from apps/meteor/client/sidebarv2/header/CreateChannelModal.tsx rename to apps/meteor/client/sidebar/header/CreateChannelModal.tsx diff --git a/apps/meteor/client/sidebar/header/CreateDirectMessage.tsx b/apps/meteor/client/sidebar/header/CreateDirectMessage.tsx index 29f8590692f2..8597541e485a 100644 --- a/apps/meteor/client/sidebar/header/CreateDirectMessage.tsx +++ b/apps/meteor/client/sidebar/header/CreateDirectMessage.tsx @@ -9,7 +9,9 @@ import { useForm, Controller } from 'react-hook-form'; import UserAutoCompleteMultipleFederated from '../../components/UserAutoCompleteMultiple/UserAutoCompleteMultipleFederated'; import { goToRoomById } from '../../lib/utils/goToRoomById'; -const CreateDirectMessage = ({ onClose }: { onClose: () => void }) => { +type CreateDirectMessageProps = { onClose: () => void }; + +const CreateDirectMessage = ({ onClose }: CreateDirectMessageProps) => { const t = useTranslation(); const directMaxUsers = useSetting('DirectMesssage_maxUsers', 1); const membersFieldId = useUniqueId(); diff --git a/apps/meteor/client/sidebar/header/CreateTeam/CreateTeamModal.tsx b/apps/meteor/client/sidebar/header/CreateTeam/CreateTeamModal.tsx deleted file mode 100644 index 3543234bca96..000000000000 --- a/apps/meteor/client/sidebar/header/CreateTeam/CreateTeamModal.tsx +++ /dev/null @@ -1,318 +0,0 @@ -import { - Box, - Button, - Field, - Icon, - Modal, - TextInput, - ToggleSwitch, - FieldGroup, - FieldLabel, - FieldRow, - FieldError, - FieldDescription, - FieldHint, - Accordion, - AccordionItem, -} from '@rocket.chat/fuselage'; -import { useUniqueId } from '@rocket.chat/fuselage-hooks'; -import { - useEndpoint, - usePermission, - usePermissionWithScopedRoles, - useSetting, - useToastMessageDispatch, - useTranslation, -} from '@rocket.chat/ui-contexts'; -import type { ComponentProps, ReactElement } from 'react'; -import React, { memo, useEffect, useMemo } from 'react'; -import { Controller, useForm } from 'react-hook-form'; - -import UserAutoCompleteMultiple from '../../../components/UserAutoCompleteMultiple'; -import { goToRoomById } from '../../../lib/utils/goToRoomById'; -import { useEncryptedRoomDescription } from '../hooks/useEncryptedRoomDescription'; - -type CreateTeamModalInputs = { - name: string; - topic: string; - isPrivate: boolean; - readOnly: boolean; - encrypted: boolean; - broadcast: boolean; - members?: string[]; -}; - -const CreateTeamModal = ({ onClose }: { onClose: () => void }): ReactElement => { - const t = useTranslation(); - const e2eEnabled = useSetting('E2E_Enable'); - const e2eEnabledForPrivateByDefault = useSetting('E2E_Enabled_Default_PrivateRooms'); - const namesValidation = useSetting('UTF8_Channel_Names_Validation'); - const allowSpecialNames = useSetting('UI_Allow_room_names_with_special_chars'); - const dispatchToastMessage = useToastMessageDispatch(); - const canCreateTeam = usePermission('create-team'); - const canSetReadOnly = usePermissionWithScopedRoles('set-readonly', ['owner']); - - const checkTeamNameExists = useEndpoint('GET', '/v1/rooms.nameExists'); - const createTeamAction = useEndpoint('POST', '/v1/teams.create'); - - const teamNameRegex = useMemo(() => { - if (allowSpecialNames) { - return null; - } - - return new RegExp(`^${namesValidation}$`); - }, [allowSpecialNames, namesValidation]); - - const validateTeamName = async (name: string): Promise => { - if (!name) { - return; - } - - if (teamNameRegex && !teamNameRegex?.test(name)) { - return t('Name_cannot_have_special_characters'); - } - - const { exists } = await checkTeamNameExists({ roomName: name }); - if (exists) { - return t('Teams_Errors_Already_exists', { name }); - } - }; - - const { - register, - control, - handleSubmit, - setValue, - watch, - formState: { errors, isSubmitting }, - } = useForm({ - defaultValues: { - isPrivate: true, - readOnly: false, - encrypted: (e2eEnabledForPrivateByDefault as boolean) ?? false, - broadcast: false, - members: [], - }, - }); - - const { isPrivate, broadcast, readOnly, encrypted } = watch(); - - useEffect(() => { - if (!isPrivate) { - setValue('encrypted', false); - } - - if (broadcast) { - setValue('encrypted', false); - } - - setValue('readOnly', broadcast); - }, [watch, setValue, broadcast, isPrivate]); - - const canChangeReadOnly = !broadcast; - const canChangeEncrypted = isPrivate && !broadcast && e2eEnabled && !e2eEnabledForPrivateByDefault; - const getEncryptedHint = useEncryptedRoomDescription('team'); - - const handleCreateTeam = async ({ - name, - members, - isPrivate, - readOnly, - topic, - broadcast, - encrypted, - }: CreateTeamModalInputs): Promise => { - const params = { - name, - members, - type: isPrivate ? 1 : 0, - room: { - readOnly, - extraData: { - topic, - broadcast, - encrypted, - }, - }, - }; - - try { - const { team } = await createTeamAction(params); - dispatchToastMessage({ type: 'success', message: t('Team_has_been_created') }); - goToRoomById(team.roomId); - } catch (error) { - dispatchToastMessage({ type: 'error', message: error }); - } finally { - onClose(); - } - }; - - const createTeamFormId = useUniqueId(); - const nameId = useUniqueId(); - const topicId = useUniqueId(); - const privateId = useUniqueId(); - const readOnlyId = useUniqueId(); - const encryptedId = useUniqueId(); - const broadcastId = useUniqueId(); - const addMembersId = useUniqueId(); - - return ( - ) => ( - - )} - > - - {t('Teams_New_Title')} - - - - - {t('Teams_new_description')} - - - - - {t('Teams_New_Name_Label')} - - - validateTeamName(value), - })} - addon={} - error={errors.name?.message} - aria-describedby={`${nameId}-error ${nameId}-hint`} - aria-required='true' - /> - - {errors?.name && ( - - {errors.name.message} - - )} - {!allowSpecialNames && {t('No_spaces')}} - - - {t('Topic')} - - - - - {t('Displayed_next_to_name')} - - - - {t('Teams_New_Add_members_Label')} - ( - - )} - /> - - - - {t('Teams_New_Private_Label')} - ( - - )} - /> - - - {isPrivate ? t('People_can_only_join_by_being_invited') : t('Anyone_can_access')} - - - - - - - - {t('Security_and_permissions')} - - - - {t('Teams_New_Encrypted_Label')} - ( - - )} - /> - - {getEncryptedHint({ isPrivate, broadcast, encrypted })} - - - - {t('Teams_New_Read_only_Label')} - ( - - )} - /> - - - {readOnly ? t('Read_only_field_hint_enabled', { roomType: 'team' }) : t('Anyone_can_send_new_messages')} - - - - - {t('Teams_New_Broadcast_Label')} - ( - - )} - /> - - {broadcast && {t('Teams_New_Broadcast_Description')}} - - - - - - - - - - - - - ); -}; - -export default memo(CreateTeamModal); diff --git a/apps/meteor/client/sidebar/header/CreateTeam/index.ts b/apps/meteor/client/sidebar/header/CreateTeam/index.ts deleted file mode 100644 index 7d953b5897b3..000000000000 --- a/apps/meteor/client/sidebar/header/CreateTeam/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './CreateTeamModal'; diff --git a/apps/meteor/client/sidebarv2/header/CreateTeamModal.tsx b/apps/meteor/client/sidebar/header/CreateTeamModal.tsx similarity index 100% rename from apps/meteor/client/sidebarv2/header/CreateTeamModal.tsx rename to apps/meteor/client/sidebar/header/CreateTeamModal.tsx diff --git a/apps/meteor/client/sidebar/header/EditStatusModal.tsx b/apps/meteor/client/sidebar/header/EditStatusModal.tsx deleted file mode 100644 index ba250d92707b..000000000000 --- a/apps/meteor/client/sidebar/header/EditStatusModal.tsx +++ /dev/null @@ -1,106 +0,0 @@ -import type { IUser } from '@rocket.chat/core-typings'; -import { Field, TextInput, FieldGroup, Modal, Button, Box, FieldLabel, FieldRow, FieldError, FieldHint } from '@rocket.chat/fuselage'; -import { useLocalStorage, useMutableCallback } from '@rocket.chat/fuselage-hooks'; -import { useToastMessageDispatch, useSetting, useTranslation, useEndpoint } from '@rocket.chat/ui-contexts'; -import type { ReactElement, ChangeEvent, ComponentProps, FormEvent } from 'react'; -import React, { useState, useCallback } from 'react'; - -import UserStatusMenu from '../../components/UserStatusMenu'; -import { USER_STATUS_TEXT_MAX_LENGTH } from '../../lib/constants'; - -type EditStatusModalProps = { - onClose: () => void; - userStatus: IUser['status']; - userStatusText: IUser['statusText']; -}; - -const EditStatusModal = ({ onClose, userStatus, userStatusText }: EditStatusModalProps): ReactElement => { - const allowUserStatusMessageChange = useSetting('Accounts_AllowUserStatusMessageChange'); - const dispatchToastMessage = useToastMessageDispatch(); - const [customStatus, setCustomStatus] = useLocalStorage('Local_Custom_Status', ''); - const initialStatusText = customStatus || userStatusText; - - const t = useTranslation(); - const [statusText, setStatusText] = useState(initialStatusText); - const [statusType, setStatusType] = useState(userStatus); - const [statusTextError, setStatusTextError] = useState(); - - const setUserStatus = useEndpoint('POST', '/v1/users.setStatus'); - - const handleStatusText = useMutableCallback((e: ChangeEvent): void => { - setStatusText(e.currentTarget.value); - - if (statusText && statusText.length > USER_STATUS_TEXT_MAX_LENGTH) { - return setStatusTextError(t('Max_length_is', USER_STATUS_TEXT_MAX_LENGTH)); - } - - return setStatusTextError(undefined); - }); - - const handleStatusType = (type: IUser['status']): void => setStatusType(type); - - const handleSaveStatus = useCallback(async () => { - try { - await setUserStatus({ message: statusText, status: statusType }); - setCustomStatus(statusText); - dispatchToastMessage({ type: 'success', message: t('StatusMessage_Changed_Successfully') }); - } catch (error) { - dispatchToastMessage({ type: 'error', message: error }); - } - - onClose(); - }, [dispatchToastMessage, setUserStatus, statusText, statusType, onClose, t]); - - return ( - ) => ( - { - e.preventDefault(); - handleSaveStatus(); - }} - {...props} - /> - )} - > - - - {t('Edit_Status')} - - - - - - {t('StatusMessage')} - - } - /> - - {!allowUserStatusMessageChange && {t('StatusMessage_Change_Disabled')}} - {statusTextError} - - - - - - - - - - - ); -}; - -export default EditStatusModal; diff --git a/apps/meteor/client/sidebar/header/Header.tsx b/apps/meteor/client/sidebar/header/Header.tsx deleted file mode 100644 index b11a103006d2..000000000000 --- a/apps/meteor/client/sidebar/header/Header.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import { Sidebar, SidebarDivider, SidebarSection } from '@rocket.chat/fuselage'; -import { FeaturePreview, FeaturePreviewOff, FeaturePreviewOn } from '@rocket.chat/ui-client'; -import { useTranslation, useUser } from '@rocket.chat/ui-contexts'; -import type { ReactElement } from 'react'; -import React, { memo } from 'react'; - -import SidebarHeaderToolbar from './SidebarHeaderToolbar'; -import UserAvatarWithStatus from './UserAvatarWithStatus'; -import UserMenu from './UserMenu'; -import Administration from './actions/Administration'; -import CreateRoom from './actions/CreateRoom'; -import Directory from './actions/Directory'; -import Home from './actions/Home'; -import Login from './actions/Login'; -import Search from './actions/Search'; -import Sort from './actions/Sort'; - -/** - * @deprecated Feature preview - * @description Should be removed when the feature became part of the core - * @memberof navigationBar - */ - -const Header = (): ReactElement => { - const t = useTranslation(); - const user = useUser(); - - return ( - - - - {user ? : } - - - - {user && ( - <> - - - - - - )} - {!user && } - - - - - - {user ? : } - - - - {user && ( - <> - - - - - - )} - {!user && } - - - - - - ); -}; - -export default memo(Header); diff --git a/apps/meteor/client/sidebar/header/HeaderUnstable.tsx b/apps/meteor/client/sidebar/header/HeaderUnstable.tsx deleted file mode 100644 index 058497aaccad..000000000000 --- a/apps/meteor/client/sidebar/header/HeaderUnstable.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { Sidebar } from '@rocket.chat/fuselage'; -import { useUserId } from '@rocket.chat/ui-contexts'; -import type { ReactElement } from 'react'; -import React, { memo } from 'react'; -import { useTranslation } from 'react-i18next'; - -import SidebarHeaderToolbar from './SidebarHeaderToolbar'; -import CreateRoom from './actions/CreateRoom'; -import Directory from './actions/Directory'; -import Login from './actions/Login'; -import Search from './actions/Search'; -import Sort from './actions/Sort'; - -const HeaderUnstable = (): ReactElement => { - const { t } = useTranslation(); - const uid = useUserId(); - - return ( - - - - {uid && ( - <> - - - - - )} - {!uid && } - - - ); -}; - -export default memo(HeaderUnstable); diff --git a/apps/meteor/client/sidebar/header/MatrixFederationSearch/FederatedRoomList.tsx b/apps/meteor/client/sidebar/header/MatrixFederationSearch/FederatedRoomList.tsx index ff0fd748c8fe..0e01cacda0ee 100644 --- a/apps/meteor/client/sidebar/header/MatrixFederationSearch/FederatedRoomList.tsx +++ b/apps/meteor/client/sidebar/header/MatrixFederationSearch/FederatedRoomList.tsx @@ -29,8 +29,9 @@ const FederatedRoomList = ({ serverName, roomName, count }: FederatedRoomListPro const { mutate: onClickJoin, isLoading: isLoadingMutation } = useMutation( ['federation/joinExternalPublicRoom'], - async ({ id, pageToken }: IFederationPublicRooms) => - joinExternalPublicRoom({ externalRoomId: id as `!${string}:${string}`, roomName, pageToken }), + async ({ id, pageToken }: IFederationPublicRooms) => { + return joinExternalPublicRoom({ externalRoomId: id as `!${string}:${string}`, roomName, pageToken }); + }, { onSuccess: (_, data) => { dispatchToastMessage({ diff --git a/apps/meteor/client/sidebar/header/MatrixFederationSearch/FederatedRoomListErrorBoundary.tsx b/apps/meteor/client/sidebar/header/MatrixFederationSearch/FederatedRoomListErrorBoundary.tsx index fd37aac816f4..1608058528bc 100644 --- a/apps/meteor/client/sidebar/header/MatrixFederationSearch/FederatedRoomListErrorBoundary.tsx +++ b/apps/meteor/client/sidebar/header/MatrixFederationSearch/FederatedRoomListErrorBoundary.tsx @@ -1,6 +1,6 @@ import { States, StatesIcon, StatesTitle, StatesSubtitle, StatesActions, StatesAction, Icon } from '@rocket.chat/fuselage'; import { QueryErrorResetBoundary } from '@tanstack/react-query'; -import type { ReactElement, ReactNode } from 'react'; +import type { ReactNode } from 'react'; import React from 'react'; import { ErrorBoundary } from 'react-error-boundary'; import { useTranslation } from 'react-i18next'; @@ -10,11 +10,12 @@ type FederatedRoomListErrorBoundaryProps = { resetKeys?: unknown[]; }; -const FederatedRoomListErrorBoundary = ({ children, resetKeys }: FederatedRoomListErrorBoundaryProps): ReactElement => { +const FederatedRoomListErrorBoundary = ({ children, resetKeys }: FederatedRoomListErrorBoundaryProps) => { const { t } = useTranslation(); + return ( - {({ reset }): ReactElement => ( + {({ reset }) => ( { const { t } = useTranslation(); - const nameId = useUniqueId(); return ( - + - + {name} {canJoin && ( diff --git a/apps/meteor/client/sidebar/header/MatrixFederationSearch/MatrixFederationManageServerModal.tsx b/apps/meteor/client/sidebar/header/MatrixFederationSearch/MatrixFederationManageServerModal.tsx index 6909a2cacae0..e3c953dcb950 100644 --- a/apps/meteor/client/sidebar/header/MatrixFederationSearch/MatrixFederationManageServerModal.tsx +++ b/apps/meteor/client/sidebar/header/MatrixFederationSearch/MatrixFederationManageServerModal.tsx @@ -1,5 +1,4 @@ -import { Divider, Modal, ButtonGroup, Button, Field, FieldLabel, FieldRow, FieldError, FieldHint, TextInput } from '@rocket.chat/fuselage'; -import { useUniqueId } from '@rocket.chat/fuselage-hooks'; +import { Divider, Modal, ButtonGroup, Button, Field, TextInput, FieldLabel, FieldRow, FieldError, FieldHint } from '@rocket.chat/fuselage'; import type { TranslationKey } from '@rocket.chat/ui-contexts'; import { useSetModal, useTranslation, useEndpoint, useToastMessageDispatch } from '@rocket.chat/ui-contexts'; import { useMutation, useQueryClient } from '@tanstack/react-query'; @@ -56,21 +55,17 @@ const MatrixFederationAddServerModal = ({ onClickClose }: MatrixFederationAddSer const { data, isLoading: isLoadingServerList } = useMatrixServerList(); - const titleId = useUniqueId(); - const serverNameId = useUniqueId(); - return ( - + - {t('Manage_servers')} + {t('Manage_servers')} - {t('Server_name')} + {t('Server_name')} ) => { @@ -81,7 +76,7 @@ const MatrixFederationAddServerModal = ({ onClickClose }: MatrixFederationAddSer }} mie={4} /> - diff --git a/apps/meteor/client/sidebar/header/MatrixFederationSearch/MatrixFederationRemoveServerList.tsx b/apps/meteor/client/sidebar/header/MatrixFederationSearch/MatrixFederationRemoveServerList.tsx index 88867313a5bc..361950cd39c9 100644 --- a/apps/meteor/client/sidebar/header/MatrixFederationSearch/MatrixFederationRemoveServerList.tsx +++ b/apps/meteor/client/sidebar/header/MatrixFederationSearch/MatrixFederationRemoveServerList.tsx @@ -1,5 +1,5 @@ import { css } from '@rocket.chat/css-in-js'; -import { Box, Option, IconButton } from '@rocket.chat/fuselage'; +import { Box, Option, Icon } from '@rocket.chat/fuselage'; import { useTranslation, useEndpoint } from '@rocket.chat/ui-contexts'; import { useMutation, useQueryClient } from '@tanstack/react-query'; import React from 'react'; @@ -44,13 +44,11 @@ const MatrixFederationRemoveServerList = ({ servers }: MatrixFederationRemoveSer {servers.map(({ name, default: isDefault }) => ( diff --git a/apps/meteor/client/sidebar/header/MatrixFederationSearch/MatrixFederationSearch.spec.tsx b/apps/meteor/client/sidebar/header/MatrixFederationSearch/MatrixFederationSearch.spec.tsx deleted file mode 100644 index 5072a1310228..000000000000 --- a/apps/meteor/client/sidebar/header/MatrixFederationSearch/MatrixFederationSearch.spec.tsx +++ /dev/null @@ -1,154 +0,0 @@ -import { mockAppRoot } from '@rocket.chat/mock-providers'; -import { render, screen, within } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; -import React from 'react'; -import { VirtuosoMockContext } from 'react-virtuoso'; - -import MatrixFederationSearch from './MatrixFederationSearch'; - -jest.mock('../../../lib/rooms/roomCoordinator', () => ({ - roomCoordinator: {}, -})); - -const renderMatrixFederationSearch = ( - serverList = [ - { name: `server-1`, default: true, local: false }, - { name: `server-2`, default: false, local: false }, - { name: `server-3`, default: false, local: false }, - ], -) => { - return render(<>, { - legacyRoot: true, - wrapper: mockAppRoot() - .withEndpoint('GET', '/v1/federation/listServersByUser', () => ({ - servers: serverList, - })) - .withEndpoint('GET', '/v1/federation/searchPublicRooms', ({ serverName, roomName, count }) => ({ - rooms: Array.from({ length: count || 100 }, (_, index) => ({ - id: `Matrix${index}`, - name: `${roomName || 'Matrix'}${index + 1}`, - canJoin: true, - canonicalAlias: `#${serverName}:matrix.org`, - joinedMembers: 44461, - topic: - 'The Official Matrix HQ - chat about Matrix here! | https://matrix.org | https://spec.matrix.org | To support Matrix.org development: https://patreon.com/matrixdotorg | Code of Conduct: https://matrix.org/legal/code-of-conduct/ | This is an English speaking room | The Official Matrix HQ - chat about Matrix here! | https://matrix.org | https://spec.matrix.org | To support Matrix.org development: https://patreon.com/matrixdotorg | Code of Conduct: https://matrix.org/legal/code-of-conduct/ | This is an English speaking room The Official Matrix HQ - chat about Matrix here! | https://matrix.org | https://spec.matrix.org | To support Matrix.org development: https://patreon.com/matrixdotorg | Code of Conduct: https://matrix.org/legal/code-of-conduct/ | This is an English speaking room | The Official Matrix HQ - chat about Matrix here! | https://matrix.org | https://spec.matrix.org | To support Matrix.org development: https://patreon.com/matrixdotorg | Code of Conduct: https://matrix.org/legal/code-of-conduct/ | This is an English speaking room', - })), - count: 1, - total: 73080, - nextPageToken: 'g6FtzZa3oXK+IUpkemFiTlVQUFh6bENKQWhFbDpmYWJyaWMucHVioWTD', - })) - .withEndpoint('POST', '/v1/federation/joinExternalPublicRoom', () => null) - .withEndpoint('POST', '/v1/federation/addServerByUser', ({ serverName }) => { - serverList.push({ name: serverName, default: false, local: false }); - return null; - }) - .withEndpoint('POST', '/v1/federation/removeServerByUser', ({ serverName }) => { - serverList = serverList.filter((server) => server.name !== serverName); - return null; - }) - .withOpenModal() - .wrap((children) => ( - {children} - )) - .build(), - }); -}; - -const openManageServers = async () => { - const manageServerLink = await screen.findByRole('button', { name: 'Manage_server_list' }); - await userEvent.click(manageServerLink); -}; - -it('should render Federated Room search modal', async () => { - renderMatrixFederationSearch(); - - expect(await screen.findByRole('dialog', { name: 'Federation_Federated_room_search' })).toBeInTheDocument(); - - expect(await screen.findByRole('listitem', { name: 'Matrix1' }, { timeout: 2000 })).toBeInTheDocument(); // TODO: remove flakyness - expect(await screen.findByRole('listitem', { name: 'Matrix2' })).toBeInTheDocument(); -}); - -it('should search for rooms', async () => { - renderMatrixFederationSearch(); - - const input = await screen.findByRole('searchbox', { name: 'Search_rooms' }); - expect(input).toBeInTheDocument(); - await userEvent.type(input, 'NotMatrix'); - - expect(await screen.findByRole('listitem', { name: 'NotMatrix1' }, { timeout: 2000 })).toBeInTheDocument(); // TODO: remove flakyness - expect(await screen.findByRole('listitem', { name: 'NotMatrix2' })).toBeInTheDocument(); -}); - -it('should close the modal when joining a room', async () => { - renderMatrixFederationSearch(); - - const firstListItem = await screen.findByRole('listitem', { name: 'Matrix1' }); - const joinButton = await within(firstListItem).findByRole('button', { name: 'Join' }); - - await userEvent.click(joinButton); - - expect(screen.queryByRole('dialog')).not.toBeInTheDocument(); -}); - -// TODO: should be a unit test for `MatrixFederationAddServerModal` -describe('server management', () => { - it('should open the manage server modal', async () => { - renderMatrixFederationSearch(); - - await openManageServers(); - - expect(await screen.findByRole('dialog', { name: 'Manage_servers' })).toBeInTheDocument(); - - expect(await screen.findByText('server-1')).toBeInTheDocument(); - expect(await screen.findByText('server-2')).toBeInTheDocument(); - expect(await screen.findByText('server-3')).toBeInTheDocument(); - }); - - it('should return to the Search modal when clicking cancel', async () => { - renderMatrixFederationSearch(); - - await openManageServers(); - - const cancelButton = await screen.findByRole('button', { name: 'Cancel' }); - await userEvent.click(cancelButton); - - expect(await screen.findByRole('dialog', { name: 'Federation_Federated_room_search' })).toBeInTheDocument(); - }); - - it('should return to the Search modal with the new server selected', async () => { - renderMatrixFederationSearch(); - - await openManageServers(); - - const input = await screen.findByRole('textbox', { name: 'Server_name' }); - await userEvent.type(input, 'server-4'); - - const addButton = await screen.findByRole('button', { name: 'Add' }); - await userEvent.click(addButton); - - expect(await screen.findByRole('dialog', { name: 'Federation_Federated_room_search' })).toBeInTheDocument(); - expect(await screen.findByRole('button', { name: 'server-4' })).toBeInTheDocument(); - }); - - it('should remove servers from the list', async () => { - renderMatrixFederationSearch([ - { name: `server-1`, default: true, local: false }, - { name: `server-2`, default: false, local: false }, - { name: `server-3`, default: false, local: false }, - { name: `server-4`, default: false, local: false }, - ]); - - await openManageServers(); - - const defaultItem = await screen.findByRole('listitem', { name: 'server-1' }); - await userEvent.hover(defaultItem); - expect(within(defaultItem).queryByRole('button', { name: 'Remove' })).not.toBeInTheDocument(); - - const lastItem = await screen.findByRole('listitem', { name: 'server-4' }); - await userEvent.hover(lastItem); - const removeButton = await within(lastItem).findByRole('button', { name: 'Remove' }); - await userEvent.click(removeButton); - - expect(screen.queryByRole('listitem', { name: 'server-4' })).not.toBeInTheDocument(); - }); -}); diff --git a/apps/meteor/client/sidebar/header/MatrixFederationSearch/MatrixFederationSearch.tsx b/apps/meteor/client/sidebar/header/MatrixFederationSearch/MatrixFederationSearch.tsx index 0108958e3e64..9ea119aabb18 100644 --- a/apps/meteor/client/sidebar/header/MatrixFederationSearch/MatrixFederationSearch.tsx +++ b/apps/meteor/client/sidebar/header/MatrixFederationSearch/MatrixFederationSearch.tsx @@ -1,5 +1,4 @@ import { Modal, Skeleton } from '@rocket.chat/fuselage'; -import { useUniqueId } from '@rocket.chat/fuselage-hooks'; import React from 'react'; import { useTranslation } from 'react-i18next'; @@ -14,12 +13,11 @@ type MatrixFederationSearchProps = { const MatrixFederationSearch = ({ onClose, defaultSelectedServer }: MatrixFederationSearchProps) => { const { t } = useTranslation(); const { data, isLoading } = useMatrixServerList(); - const titleId = useUniqueId(); return ( - + - {t('Federation_Federated_room_search')} + {t('Federation_Federated_room_search')} diff --git a/apps/meteor/client/sidebar/header/MatrixFederationSearch/MatrixFederationSearchModalContent.tsx b/apps/meteor/client/sidebar/header/MatrixFederationSearch/MatrixFederationSearchModalContent.tsx index b55737974581..6ee8e257c294 100644 --- a/apps/meteor/client/sidebar/header/MatrixFederationSearch/MatrixFederationSearchModalContent.tsx +++ b/apps/meteor/client/sidebar/header/MatrixFederationSearch/MatrixFederationSearchModalContent.tsx @@ -1,5 +1,5 @@ import type { SelectOption } from '@rocket.chat/fuselage'; -import { Box, SearchInput, Select } from '@rocket.chat/fuselage'; +import { Box, Select, TextInput } from '@rocket.chat/fuselage'; import { useDebouncedValue } from '@rocket.chat/fuselage-hooks'; import { useSetModal } from '@rocket.chat/ui-contexts'; import type { FormEvent } from 'react'; @@ -34,7 +34,7 @@ const MatrixFederationSearchModalContent = ({ defaultSelectedServer, servers }: const { t } = useTranslation(); - const serverOptions = useMemo(() => servers.map((server): SelectOption => [server.name, server.name]), [servers]); + const serverOptions = useMemo>(() => servers.map((server): SelectOption => [server.name, server.name]), [servers]); const manageServers = useCallback(() => { setModal( @@ -48,8 +48,7 @@ const MatrixFederationSearchModalContent = ({ defaultSelectedServer, servers }: setServerName(String(value))} /> - - ) => setRoomName(e.currentTarget.value)} - /> - - - {t('Manage_server_list')} - - - - - - ); -}; - -export default MatrixFederationSearchModalContent; diff --git a/apps/meteor/client/sidebarv2/header/MatrixFederationSearch/index.ts b/apps/meteor/client/sidebarv2/header/MatrixFederationSearch/index.ts deleted file mode 100644 index 8447180665a0..000000000000 --- a/apps/meteor/client/sidebarv2/header/MatrixFederationSearch/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './MatrixFederationSearch'; diff --git a/apps/meteor/client/sidebarv2/header/MatrixFederationSearch/useMatrixServerList.ts b/apps/meteor/client/sidebarv2/header/MatrixFederationSearch/useMatrixServerList.ts deleted file mode 100644 index 4f9ba64848f3..000000000000 --- a/apps/meteor/client/sidebarv2/header/MatrixFederationSearch/useMatrixServerList.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { useEndpoint } from '@rocket.chat/ui-contexts'; -import { useQuery } from '@tanstack/react-query'; - -export const useMatrixServerList = () => { - const fetchServerList = useEndpoint('GET', '/v1/federation/listServersByUser'); - return useQuery(['federation/listServersByUsers'], async () => fetchServerList(), { - useErrorBoundary: true, - staleTime: Infinity, - }); -}; diff --git a/apps/meteor/client/sidebarv2/header/actions/CreateRoom.tsx b/apps/meteor/client/sidebarv2/header/actions/CreateRoom.tsx deleted file mode 100644 index 5c56b44554b8..000000000000 --- a/apps/meteor/client/sidebarv2/header/actions/CreateRoom.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { SidebarV2Action } from '@rocket.chat/fuselage'; -import { GenericMenu } from '@rocket.chat/ui-client'; -import type { HTMLAttributes } from 'react'; -import React from 'react'; -import { useTranslation } from 'react-i18next'; - -import { useCreateRoom } from './hooks/useCreateRoomMenu'; - -type CreateRoomProps = Omit, 'is'>; - -const CreateRoom = (props: CreateRoomProps) => { - const { t } = useTranslation(); - - const sections = useCreateRoom(); - - return ; -}; - -export default CreateRoom; diff --git a/apps/meteor/client/sidebarv2/header/actions/Sort.tsx b/apps/meteor/client/sidebarv2/header/actions/Sort.tsx deleted file mode 100644 index dcfa84dd71bc..000000000000 --- a/apps/meteor/client/sidebarv2/header/actions/Sort.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { SidebarV2Action } from '@rocket.chat/fuselage'; -import { GenericMenu } from '@rocket.chat/ui-client'; -import type { HTMLAttributes } from 'react'; -import React from 'react'; -import { useTranslation } from 'react-i18next'; - -import { useSortMenu } from './hooks/useSortMenu'; - -type SortProps = Omit, 'is'>; - -const Sort = (props: SortProps) => { - const { t } = useTranslation(); - - const sections = useSortMenu(); - - return ; -}; - -export default Sort; diff --git a/apps/meteor/client/sidebarv2/header/actions/hooks/useCreateRoomItems.tsx b/apps/meteor/client/sidebarv2/header/actions/hooks/useCreateRoomItems.tsx deleted file mode 100644 index 4d313975d6f5..000000000000 --- a/apps/meteor/client/sidebarv2/header/actions/hooks/useCreateRoomItems.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import type { GenericMenuItemProps } from '@rocket.chat/ui-client'; -import { useTranslation, useSetting, useAtLeastOnePermission } from '@rocket.chat/ui-contexts'; - -import CreateDiscussion from '../../../../components/CreateDiscussion'; -import CreateChannelModal from '../../CreateChannelModal'; -import CreateDirectMessage from '../../CreateDirectMessage'; -import CreateTeamModal from '../../CreateTeamModal'; -import { useCreateRoomModal } from '../../hooks/useCreateRoomModal'; - -const CREATE_CHANNEL_PERMISSIONS = ['create-c', 'create-p']; -const CREATE_TEAM_PERMISSIONS = ['create-team']; -const CREATE_DIRECT_PERMISSIONS = ['create-d']; -const CREATE_DISCUSSION_PERMISSIONS = ['start-discussion', 'start-discussion-other-user']; - -export const useCreateRoomItems = (): GenericMenuItemProps[] => { - const t = useTranslation(); - const discussionEnabled = useSetting('Discussion_enabled'); - - const canCreateChannel = useAtLeastOnePermission(CREATE_CHANNEL_PERMISSIONS); - const canCreateTeam = useAtLeastOnePermission(CREATE_TEAM_PERMISSIONS); - const canCreateDirectMessages = useAtLeastOnePermission(CREATE_DIRECT_PERMISSIONS); - const canCreateDiscussion = useAtLeastOnePermission(CREATE_DISCUSSION_PERMISSIONS); - - const createChannel = useCreateRoomModal(CreateChannelModal); - const createTeam = useCreateRoomModal(CreateTeamModal); - const createDiscussion = useCreateRoomModal(CreateDiscussion); - const createDirectMessage = useCreateRoomModal(CreateDirectMessage); - - const createChannelItem: GenericMenuItemProps = { - id: 'channel', - content: t('Channel'), - icon: 'hashtag', - onClick: () => { - createChannel(); - }, - }; - const createTeamItem: GenericMenuItemProps = { - id: 'team', - content: t('Team'), - icon: 'team', - onClick: () => { - createTeam(); - }, - }; - const createDirectMessageItem: GenericMenuItemProps = { - id: 'direct', - content: t('Direct_message'), - icon: 'balloon', - onClick: () => { - createDirectMessage(); - }, - }; - const createDiscussionItem: GenericMenuItemProps = { - id: 'discussion', - content: t('Discussion'), - icon: 'discussion', - onClick: () => { - createDiscussion(); - }, - }; - - return [ - ...(canCreateDirectMessages ? [createDirectMessageItem] : []), - ...(canCreateDiscussion && discussionEnabled ? [createDiscussionItem] : []), - ...(canCreateChannel ? [createChannelItem] : []), - ...(canCreateTeam ? [createTeamItem] : []), - ]; -}; diff --git a/apps/meteor/client/sidebarv2/header/actions/hooks/useCreateRoomMenu.tsx b/apps/meteor/client/sidebarv2/header/actions/hooks/useCreateRoomMenu.tsx deleted file mode 100644 index 795944b8d819..000000000000 --- a/apps/meteor/client/sidebarv2/header/actions/hooks/useCreateRoomMenu.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { useAtLeastOnePermission, useSetting } from '@rocket.chat/ui-contexts'; -import { useTranslation } from 'react-i18next'; - -import { useCreateRoomItems } from './useCreateRoomItems'; -import { useMatrixFederationItems } from './useMatrixFederationItems'; -import { useIsEnterprise } from '../../../../hooks/useIsEnterprise'; - -const CREATE_ROOM_PERMISSIONS = ['create-c', 'create-p', 'create-d', 'start-discussion', 'start-discussion-other-user']; - -export const useCreateRoom = () => { - const { t } = useTranslation(); - const showCreate = useAtLeastOnePermission(CREATE_ROOM_PERMISSIONS); - - const { data } = useIsEnterprise(); - const isMatrixEnabled = useSetting('Federation_Matrix_enabled') && data?.isEnterprise; - - const createRoomItems = useCreateRoomItems(); - const matrixFederationSearchItems = useMatrixFederationItems({ isMatrixEnabled }); - - const sections = [ - { title: t('Create_new'), items: createRoomItems, permission: showCreate }, - { title: t('Explore'), items: matrixFederationSearchItems, permission: showCreate && isMatrixEnabled }, - ]; - - return sections.filter((section) => section.permission); -}; diff --git a/apps/meteor/client/sidebarv2/header/actions/hooks/useGroupingListItems.spec.tsx b/apps/meteor/client/sidebarv2/header/actions/hooks/useGroupingListItems.spec.tsx deleted file mode 100644 index 08363b0ee036..000000000000 --- a/apps/meteor/client/sidebarv2/header/actions/hooks/useGroupingListItems.spec.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { renderHook } from '@testing-library/react'; - -import { useGroupingListItems } from './useGroupingListItems'; - -it('should render groupingList items', async () => { - const { result } = renderHook(() => useGroupingListItems(), { legacyRoot: true }); - - expect(result.current[0]).toEqual( - expect.objectContaining({ - id: 'unread', - }), - ); - - expect(result.current[1]).toEqual( - expect.objectContaining({ - id: 'favorites', - }), - ); - - expect(result.current[2]).toEqual( - expect.objectContaining({ - id: 'types', - }), - ); -}); diff --git a/apps/meteor/client/sidebarv2/header/actions/hooks/useGroupingListItems.tsx b/apps/meteor/client/sidebarv2/header/actions/hooks/useGroupingListItems.tsx deleted file mode 100644 index 880d6d5f7e48..000000000000 --- a/apps/meteor/client/sidebarv2/header/actions/hooks/useGroupingListItems.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { CheckBox } from '@rocket.chat/fuselage'; -import type { GenericMenuItemProps } from '@rocket.chat/ui-client'; -import { useEndpoint, useUserPreference } from '@rocket.chat/ui-contexts'; -import React, { useCallback } from 'react'; -import { useTranslation } from 'react-i18next'; - -export const useGroupingListItems = (): GenericMenuItemProps[] => { - const { t } = useTranslation(); - - const sidebarGroupByType = useUserPreference('sidebarGroupByType'); - const sidebarShowFavorites = useUserPreference('sidebarShowFavorites'); - const sidebarShowUnread = useUserPreference('sidebarShowUnread'); - - const saveUserPreferences = useEndpoint('POST', '/v1/users.setPreferences'); - - const useHandleChange = (key: 'sidebarGroupByType' | 'sidebarShowFavorites' | 'sidebarShowUnread', value: boolean): (() => void) => - useCallback(() => saveUserPreferences({ data: { [key]: value } }), [key, value]); - - const handleChangeGroupByType = useHandleChange('sidebarGroupByType', !sidebarGroupByType); - const handleChangeShoFavorite = useHandleChange('sidebarShowFavorites', !sidebarShowFavorites); - const handleChangeShowUnread = useHandleChange('sidebarShowUnread', !sidebarShowUnread); - - return [ - { - id: 'unread', - content: t('Unread'), - icon: 'flag', - addon: , - }, - { - id: 'favorites', - content: t('Favorites'), - icon: 'star', - addon: , - }, - { - id: 'types', - content: t('Types'), - icon: 'group-by-type', - addon: , - }, - ]; -}; diff --git a/apps/meteor/client/sidebarv2/header/actions/hooks/useMatrixFederationItems.ts b/apps/meteor/client/sidebarv2/header/actions/hooks/useMatrixFederationItems.ts deleted file mode 100644 index cd0abc9bdfb2..000000000000 --- a/apps/meteor/client/sidebarv2/header/actions/hooks/useMatrixFederationItems.ts +++ /dev/null @@ -1,26 +0,0 @@ -import type { GenericMenuItemProps } from '@rocket.chat/ui-client'; -import { useTranslation } from 'react-i18next'; - -import MatrixFederationSearch from '../../MatrixFederationSearch'; -import { useCreateRoomModal } from '../../hooks/useCreateRoomModal'; - -export const useMatrixFederationItems = ({ - isMatrixEnabled, -}: { - isMatrixEnabled: string | number | boolean | null | undefined; -}): GenericMenuItemProps[] => { - const { t } = useTranslation(); - - const searchFederatedRooms = useCreateRoomModal(MatrixFederationSearch); - - const matrixFederationSearchItem: GenericMenuItemProps = { - id: 'matrix-federation-search', - content: t('Federation_Search_federated_rooms'), - icon: 'magnifier', - onClick: () => { - searchFederatedRooms(); - }, - }; - - return [...(isMatrixEnabled ? [matrixFederationSearchItem] : [])]; -}; diff --git a/apps/meteor/client/sidebarv2/header/actions/hooks/useSortMenu.tsx b/apps/meteor/client/sidebarv2/header/actions/hooks/useSortMenu.tsx deleted file mode 100644 index af6a73ce6eab..000000000000 --- a/apps/meteor/client/sidebarv2/header/actions/hooks/useSortMenu.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { useTranslation } from 'react-i18next'; - -import { useGroupingListItems } from './useGroupingListItems'; -import { useSortModeItems } from './useSortModeItems'; -import { useViewModeItems } from './useViewModeItems'; - -export const useSortMenu = () => { - const { t } = useTranslation(); - - const viewModeItems = useViewModeItems(); - const sortModeItems = useSortModeItems(); - const groupingListItems = useGroupingListItems(); - - const sections = [ - { title: t('Display'), items: viewModeItems }, - { title: t('Sort_By'), items: sortModeItems }, - { title: t('Group_by'), items: groupingListItems }, - ]; - - return sections; -}; diff --git a/apps/meteor/client/sidebarv2/header/actions/hooks/useSortModeItems.spec.tsx b/apps/meteor/client/sidebarv2/header/actions/hooks/useSortModeItems.spec.tsx deleted file mode 100644 index 46d5aab37321..000000000000 --- a/apps/meteor/client/sidebarv2/header/actions/hooks/useSortModeItems.spec.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { renderHook } from '@testing-library/react'; - -import { useSortModeItems } from './useSortModeItems'; - -it('should render sortMode items', async () => { - const { result } = renderHook(() => useSortModeItems(), { legacyRoot: true }); - - expect(result.current[0]).toEqual( - expect.objectContaining({ - id: 'activity', - }), - ); - - expect(result.current[1]).toEqual( - expect.objectContaining({ - id: 'name', - }), - ); -}); diff --git a/apps/meteor/client/sidebarv2/header/actions/hooks/useSortModeItems.tsx b/apps/meteor/client/sidebarv2/header/actions/hooks/useSortModeItems.tsx deleted file mode 100644 index 4e8e7566c8e6..000000000000 --- a/apps/meteor/client/sidebarv2/header/actions/hooks/useSortModeItems.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { RadioButton } from '@rocket.chat/fuselage'; -import type { GenericMenuItemProps } from '@rocket.chat/ui-client'; -import { useEndpoint, useUserPreference } from '@rocket.chat/ui-contexts'; -import React, { useCallback } from 'react'; -import { useTranslation } from 'react-i18next'; - -import { - OmnichannelSortingDisclaimer, - useOmnichannelSortingDisclaimer, -} from '../../../../components/Omnichannel/OmnichannelSortingDisclaimer'; - -export const useSortModeItems = (): GenericMenuItemProps[] => { - const { t } = useTranslation(); - - const saveUserPreferences = useEndpoint('POST', '/v1/users.setPreferences'); - const sidebarSortBy = useUserPreference<'activity' | 'alphabetical'>('sidebarSortby', 'activity'); - const isOmnichannelEnabled = useOmnichannelSortingDisclaimer(); - - const useHandleChange = (value: 'alphabetical' | 'activity'): (() => void) => - useCallback(() => saveUserPreferences({ data: { sidebarSortby: value } }), [value]); - - const setToAlphabetical = useHandleChange('alphabetical'); - const setToActivity = useHandleChange('activity'); - - return [ - { - id: 'activity', - content: t('Activity'), - icon: 'clock', - addon: , - description: sidebarSortBy === 'activity' && isOmnichannelEnabled && , - }, - { - id: 'name', - content: t('Name'), - icon: 'sort-az', - addon: , - description: sidebarSortBy === 'alphabetical' && isOmnichannelEnabled && , - }, - ]; -}; diff --git a/apps/meteor/client/sidebarv2/header/actions/hooks/useViewModeItems.spec.tsx b/apps/meteor/client/sidebarv2/header/actions/hooks/useViewModeItems.spec.tsx deleted file mode 100644 index 7cdc6ff7bce8..000000000000 --- a/apps/meteor/client/sidebarv2/header/actions/hooks/useViewModeItems.spec.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { renderHook } from '@testing-library/react'; - -import { useViewModeItems } from './useViewModeItems'; - -it('should render viewMode items', async () => { - const { result } = renderHook(() => useViewModeItems(), { legacyRoot: true }); - - expect(result.current[0]).toEqual( - expect.objectContaining({ - id: 'extended', - }), - ); - - expect(result.current[1]).toEqual( - expect.objectContaining({ - id: 'medium', - }), - ); - - expect(result.current[2]).toEqual( - expect.objectContaining({ - id: 'condensed', - }), - ); - - expect(result.current[3]).toEqual( - expect.objectContaining({ - id: 'avatars', - }), - ); -}); diff --git a/apps/meteor/client/sidebarv2/header/actions/hooks/useViewModeItems.tsx b/apps/meteor/client/sidebarv2/header/actions/hooks/useViewModeItems.tsx deleted file mode 100644 index 06fe43117d47..000000000000 --- a/apps/meteor/client/sidebarv2/header/actions/hooks/useViewModeItems.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { RadioButton, ToggleSwitch } from '@rocket.chat/fuselage'; -import type { GenericMenuItemProps } from '@rocket.chat/ui-client'; -import { useEndpoint, useUserPreference } from '@rocket.chat/ui-contexts'; -import React, { useCallback } from 'react'; -import { useTranslation } from 'react-i18next'; - -export const useViewModeItems = (): GenericMenuItemProps[] => { - const { t } = useTranslation(); - - const saveUserPreferences = useEndpoint('POST', '/v1/users.setPreferences'); - - const useHandleChange = (value: 'medium' | 'extended' | 'condensed'): (() => void) => - useCallback(() => saveUserPreferences({ data: { sidebarViewMode: value } }), [value]); - - const sidebarViewMode = useUserPreference<'medium' | 'extended' | 'condensed'>('sidebarViewMode', 'extended'); - const sidebarDisplayAvatar = useUserPreference('sidebarDisplayAvatar', false); - - const setToExtended = useHandleChange('extended'); - const setToMedium = useHandleChange('medium'); - const setToCondensed = useHandleChange('condensed'); - - const handleChangeSidebarDisplayAvatar = useCallback( - () => saveUserPreferences({ data: { sidebarDisplayAvatar: !sidebarDisplayAvatar } }), - [saveUserPreferences, sidebarDisplayAvatar], - ); - - return [ - { - id: 'extended', - content: t('Extended'), - icon: 'extended-view', - addon: , - }, - { - id: 'medium', - content: t('Medium'), - icon: 'medium-view', - addon: , - }, - { - id: 'condensed', - content: t('Condensed'), - icon: 'condensed-view', - addon: , - }, - { - id: 'avatars', - content: t('Avatars'), - icon: 'user-rounded', - addon: , - }, - ]; -}; diff --git a/apps/meteor/client/sidebarv2/header/hooks/useCreateRoomModal.tsx b/apps/meteor/client/sidebarv2/header/hooks/useCreateRoomModal.tsx deleted file mode 100644 index 70e14f80adf6..000000000000 --- a/apps/meteor/client/sidebarv2/header/hooks/useCreateRoomModal.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; -import { useSetModal } from '@rocket.chat/ui-contexts'; -import type { FC } from 'react'; -import React from 'react'; - -export const useCreateRoomModal = (Component: FC): (() => void) => { - const setModal = useSetModal(); - - return useEffectEvent(() => { - const handleClose = (): void => { - setModal(null); - }; - - setModal(() => ); - }); -}; diff --git a/apps/meteor/client/sidebarv2/header/hooks/useDropdownVisibility.ts b/apps/meteor/client/sidebarv2/header/hooks/useDropdownVisibility.ts deleted file mode 100644 index 390486d1727d..000000000000 --- a/apps/meteor/client/sidebarv2/header/hooks/useDropdownVisibility.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { useToggle, useOutsideClick } from '@rocket.chat/fuselage-hooks'; -import type { RefObject } from 'react'; -import { useCallback } from 'react'; - -/** - * useDropdownVisibility - * is used to control the visibility of a dropdown - * also checks if the user clicked outside the dropdown, but ignores if the click was on the anchor - * @param {Object} props - * @param {Object} props.reference - The reference where the dropdown will be attached to - * @param {Object} props.target - The target, the dropdown itself - * @returns {Object} - * @returns {Boolean} isVisible - The visibility of the dropdown - * @returns {Function} toggle - The function to toggle the dropdown - */ - -export const useDropdownVisibility = ({ - reference, - target, -}: { - reference: RefObject; - target: RefObject; -}): { - isVisible: boolean; - toggle: (state?: boolean) => void; -} => { - const [isVisible, toggle] = useToggle(false); - - useOutsideClick( - [target, reference], - useCallback(() => toggle(false), [toggle]), - ); - - return { - isVisible, - toggle, - }; -}; diff --git a/apps/meteor/client/sidebarv2/header/hooks/useEncryptedRoomDescription.tsx b/apps/meteor/client/sidebarv2/header/hooks/useEncryptedRoomDescription.tsx deleted file mode 100644 index 0cef06d39173..000000000000 --- a/apps/meteor/client/sidebarv2/header/hooks/useEncryptedRoomDescription.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { useSetting } from '@rocket.chat/ui-contexts'; -import { useTranslation } from 'react-i18next'; - -export const useEncryptedRoomDescription = (roomType: 'channel' | 'team') => { - const { t } = useTranslation(); - const e2eEnabled = useSetting('E2E_Enable'); - const e2eEnabledForPrivateByDefault = useSetting('E2E_Enabled_Default_PrivateRooms'); - - return ({ isPrivate, broadcast, encrypted }: { isPrivate: boolean; broadcast: boolean; encrypted: boolean }) => { - if (!e2eEnabled) { - return t('Not_available_for_this_workspace'); - } - if (!isPrivate) { - return t('Encrypted_not_available', { roomType }); - } - if (broadcast) { - return t('Not_available_for_broadcast', { roomType }); - } - if (e2eEnabledForPrivateByDefault || encrypted) { - return t('Encrypted_messages', { roomType }); - } - return t('Encrypted_messages_false'); - }; -}; diff --git a/apps/meteor/client/sidebarv2/hooks/useAvatarTemplate.tsx b/apps/meteor/client/sidebarv2/hooks/useAvatarTemplate.tsx deleted file mode 100644 index e5bf780ee5b0..000000000000 --- a/apps/meteor/client/sidebarv2/hooks/useAvatarTemplate.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import type { IRoom } from '@rocket.chat/core-typings'; -import { RoomAvatar } from '@rocket.chat/ui-avatar'; -import { useUserPreference } from '@rocket.chat/ui-contexts'; -import type { ComponentType } from 'react'; -import React, { useMemo } from 'react'; - -export const useAvatarTemplate = ( - sidebarViewMode?: 'extended' | 'medium' | 'condensed', - sidebarDisplayAvatar?: boolean, -): null | ComponentType => { - const sidebarViewModeFromSettings = useUserPreference<'extended' | 'medium' | 'condensed'>('sidebarViewMode'); - const sidebarDisplayAvatarFromSettings = useUserPreference('sidebarDisplayAvatar'); - - const viewMode = sidebarViewMode ?? sidebarViewModeFromSettings; - const displayAvatar = sidebarDisplayAvatar ?? sidebarDisplayAvatarFromSettings; - return useMemo(() => { - if (!displayAvatar) { - return null; - } - - const size = ((): 'x36' | 'x28' | 'x20' => { - switch (viewMode) { - case 'extended': - return 'x36'; - case 'medium': - return 'x28'; - case 'condensed': - default: - return 'x20'; - } - })(); - - const renderRoomAvatar: ComponentType = (room) => ( - - ); - - return renderRoomAvatar; - }, [displayAvatar, viewMode]); -}; diff --git a/apps/meteor/client/sidebarv2/hooks/usePreventDefault.ts b/apps/meteor/client/sidebarv2/hooks/usePreventDefault.ts deleted file mode 100644 index 9d3ca18da35e..000000000000 --- a/apps/meteor/client/sidebarv2/hooks/usePreventDefault.ts +++ /dev/null @@ -1,21 +0,0 @@ -import type { RefObject } from 'react'; -import { useEffect } from 'react'; - -export const usePreventDefault = (ref: RefObject): { ref: RefObject } => { - // Flowrouter uses an addEventListener on the document to capture any clink link, since the react synthetic event use an addEventListener on the document too, - // it is impossible/hard to determine which one will happen before and prevent/stop propagation, so feel free to remove this effect after remove flow router :) - - useEffect(() => { - const { current } = ref; - const stopPropagation: EventListener = (e) => { - if ([(e.target as HTMLElement).nodeName, (e.target as HTMLElement).parentElement?.nodeName].includes('BUTTON')) { - e.preventDefault(); - } - }; - current?.addEventListener('click', stopPropagation); - - return (): void => current?.addEventListener('click', stopPropagation); - }, [ref]); - - return { ref }; -}; diff --git a/apps/meteor/client/sidebarv2/hooks/useRoomList.ts b/apps/meteor/client/sidebarv2/hooks/useRoomList.ts deleted file mode 100644 index 921d956147ba..000000000000 --- a/apps/meteor/client/sidebarv2/hooks/useRoomList.ts +++ /dev/null @@ -1,214 +0,0 @@ -import type { ILivechatInquiryRecord, IRoom, ISubscription } from '@rocket.chat/core-typings'; -import { useDebouncedValue } from '@rocket.chat/fuselage-hooks'; -import type { SubscriptionWithRoom, TranslationKey } from '@rocket.chat/ui-contexts'; -import { useUserPreference, useUserSubscriptions, useSetting } from '@rocket.chat/ui-contexts'; -import { useMemo } from 'react'; - -import { useVideoConfIncomingCalls } from '../../contexts/VideoConfContext'; -import { useOmnichannelEnabled } from '../../hooks/omnichannel/useOmnichannelEnabled'; -import { useQueuedInquiries } from '../../hooks/omnichannel/useQueuedInquiries'; -import { useSortQueryOptions } from '../../hooks/useSortQueryOptions'; - -const query = { open: { $ne: false } }; - -const emptyQueue: ILivechatInquiryRecord[] = []; - -const order = [ - 'Incoming_Calls', - 'Incoming_Livechats', - 'Open_Livechats', - 'On_Hold_Chats', - 'Unread', - 'Favorites', - 'Teams', - 'Discussions', - 'Channels', - 'Direct_Messages', - 'Conversations', -] as const; - -type useRoomListReturnType = { - roomList: Array; - groupsCount: number[]; - groupsList: TranslationKey[]; - groupedUnreadInfo: Pick< - SubscriptionWithRoom, - 'userMentions' | 'groupMentions' | 'unread' | 'tunread' | 'tunreadUser' | 'tunreadGroup' | 'alert' | 'hideUnreadStatus' - >[]; -}; -export const useRoomList = ({ collapsedGroups }: { collapsedGroups?: string[] }): useRoomListReturnType => { - const showOmnichannel = useOmnichannelEnabled(); - const sidebarGroupByType = useUserPreference('sidebarGroupByType'); - const favoritesEnabled = useUserPreference('sidebarShowFavorites'); - const sidebarOrder = useUserPreference('sidebarSectionsOrder') ?? order; - const isDiscussionEnabled = useSetting('Discussion_enabled'); - const sidebarShowUnread = useUserPreference('sidebarShowUnread'); - - const options = useSortQueryOptions(); - - const rooms = useUserSubscriptions(query, options); - - const inquiries = useQueuedInquiries(); - - const incomingCalls = useVideoConfIncomingCalls(); - - const queue = inquiries.enabled ? inquiries.queue : emptyQueue; - - const { groupsCount, groupsList, roomList, groupedUnreadInfo } = useDebouncedValue( - useMemo(() => { - const isCollapsed = (groupTitle: string) => collapsedGroups?.includes(groupTitle); - - const incomingCall = new Set(); - const favorite = new Set(); - const team = new Set(); - const omnichannel = new Set(); - const unread = new Set(); - const channels = new Set(); - const direct = new Set(); - const discussion = new Set(); - const conversation = new Set(); - const onHold = new Set(); - - rooms.forEach((room) => { - if (room.archived) { - return; - } - - if (incomingCalls.find((call) => call.rid === room.rid)) { - return incomingCall.add(room); - } - - if (sidebarShowUnread && (room.alert || room.unread || room.tunread?.length) && !room.hideUnreadStatus) { - return unread.add(room); - } - - if (favoritesEnabled && room.f) { - return favorite.add(room); - } - - if (sidebarGroupByType && room.teamMain) { - return team.add(room); - } - - if (sidebarGroupByType && isDiscussionEnabled && room.prid) { - return discussion.add(room); - } - - if (room.t === 'c' || room.t === 'p') { - channels.add(room); - } - - if (room.t === 'l' && room.onHold) { - return showOmnichannel && onHold.add(room); - } - - if (room.t === 'l') { - return showOmnichannel && omnichannel.add(room); - } - - if (room.t === 'd') { - direct.add(room); - } - - conversation.add(room); - }); - - const groups = new Map>(); - incomingCall.size && groups.set('Incoming_Calls', incomingCall); - - showOmnichannel && inquiries.enabled && queue.length && groups.set('Incoming_Livechats', new Set(queue)); - showOmnichannel && omnichannel.size && groups.set('Open_Livechats', omnichannel); - showOmnichannel && onHold.size && groups.set('On_Hold_Chats', onHold); - - sidebarShowUnread && unread.size && groups.set('Unread', unread); - - favoritesEnabled && favorite.size && groups.set('Favorites', favorite); - - sidebarGroupByType && team.size && groups.set('Teams', team); - - sidebarGroupByType && isDiscussionEnabled && discussion.size && groups.set('Discussions', discussion); - - sidebarGroupByType && channels.size && groups.set('Channels', channels); - - sidebarGroupByType && direct.size && groups.set('Direct_Messages', direct); - - !sidebarGroupByType && groups.set('Conversations', conversation); - - const { groupsCount, groupsList, roomList, groupedUnreadInfo } = sidebarOrder.reduce( - (acc, key) => { - const value = groups.get(key); - - if (!value) { - return acc; - } - - acc.groupsList.push(key as TranslationKey); - - const groupedUnreadInfoAcc = { - userMentions: 0, - groupMentions: 0, - tunread: [], - tunreadUser: [], - unread: 0, - }; - - if (isCollapsed(key)) { - const groupedUnreadInfo = [...value].reduce( - (counter, { userMentions, groupMentions, tunread, tunreadUser, unread, alert, hideUnreadStatus }) => { - if (hideUnreadStatus) { - return counter; - } - - counter.userMentions += userMentions || 0; - counter.groupMentions += groupMentions || 0; - counter.tunread = [...counter.tunread, ...(tunread || [])]; - counter.tunreadUser = [...counter.tunreadUser, ...(tunreadUser || [])]; - counter.unread += unread || 0; - !unread && !tunread?.length && alert && (counter.unread += 1); - return counter; - }, - groupedUnreadInfoAcc, - ); - - acc.groupedUnreadInfo.push(groupedUnreadInfo); - acc.groupsCount.push(0); - return acc; - } - - acc.groupedUnreadInfo.push(groupedUnreadInfoAcc); - acc.groupsCount.push(value.size); - acc.roomList.push(...value); - return acc; - }, - { - groupsCount: [], - groupsList: [], - roomList: [], - groupedUnreadInfo: [], - } as useRoomListReturnType, - ); - - return { groupsCount, groupsList, roomList, groupedUnreadInfo }; - }, [ - rooms, - showOmnichannel, - inquiries.enabled, - queue, - sidebarShowUnread, - favoritesEnabled, - sidebarGroupByType, - isDiscussionEnabled, - sidebarOrder, - collapsedGroups, - incomingCalls, - ]), - 50, - ); - - return { - roomList, - groupsCount, - groupsList, - groupedUnreadInfo, - }; -}; diff --git a/apps/meteor/client/sidebarv2/hooks/useShortcutOpenMenu.ts b/apps/meteor/client/sidebarv2/hooks/useShortcutOpenMenu.ts deleted file mode 100644 index 9898e67040e1..000000000000 --- a/apps/meteor/client/sidebarv2/hooks/useShortcutOpenMenu.ts +++ /dev/null @@ -1,21 +0,0 @@ -import type { RefObject } from 'react'; -import { useEffect } from 'react'; -import tinykeys from 'tinykeys'; - -// used to open the menu option by keyboard -export const useShortcutOpenMenu = (ref: RefObject): void => { - useEffect(() => { - const unsubscribe = tinykeys(ref.current as HTMLElement, { - Alt: (event) => { - if (!(event.target as HTMLElement).className.includes('rcx-sidebar-item')) { - return; - } - event.preventDefault(); - (event.target as HTMLElement).querySelector('button')?.click(); - }, - }); - return (): void => { - unsubscribe(); - }; - }, [ref]); -}; diff --git a/apps/meteor/client/sidebarv2/index.ts b/apps/meteor/client/sidebarv2/index.ts deleted file mode 100644 index 55cd4f79dbf8..000000000000 --- a/apps/meteor/client/sidebarv2/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './SidebarRegion'; diff --git a/apps/meteor/client/sidebarv2/search/Row.tsx b/apps/meteor/client/sidebarv2/search/Row.tsx deleted file mode 100644 index c0d332c5fa7e..000000000000 --- a/apps/meteor/client/sidebarv2/search/Row.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import type { IRoom, ISubscription } from '@rocket.chat/core-typings'; -import type { ReactElement } from 'react'; -import React, { memo } from 'react'; - -import UserItem from './UserItem'; -import SidebarItemTemplateWithData from '../RoomList/SidebarItemTemplateWithData'; - -type RowProps = { - item: ISubscription & IRoom; - data: Record; -}; - -const Row = ({ item, data }: RowProps): ReactElement => { - const { t, SidebarItemTemplate, avatarTemplate: AvatarTemplate, useRealName, extended } = data; - - if (item.t === 'd' && !item.u) { - return ( - - ); - } - return ( - - ); -}; - -export default memo(Row); diff --git a/apps/meteor/client/sidebarv2/search/UserItem.tsx b/apps/meteor/client/sidebarv2/search/UserItem.tsx deleted file mode 100644 index 9cfa97fd797c..000000000000 --- a/apps/meteor/client/sidebarv2/search/UserItem.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import type { IUser } from '@rocket.chat/core-typings'; -import { SidebarV2ItemIcon } from '@rocket.chat/fuselage'; -import React, { memo } from 'react'; - -import { ReactiveUserStatus } from '../../components/UserStatus'; -import { roomCoordinator } from '../../lib/rooms/roomCoordinator'; - -type UserItemProps = { - item: { - name?: string; - fname?: string; - _id: IUser['_id']; - t: string; - }; - t: (value: string) => string; - SidebarItemTemplate: any; - AvatarTemplate: any; - id: string; - style?: CSSStyleRule; - useRealName?: boolean; -}; - -const UserItem = ({ item, id, style, t, SidebarItemTemplate, AvatarTemplate, useRealName }: UserItemProps) => { - const title = useRealName ? item.fname || item.name : item.name || item.fname; - const icon = } />; - const href = roomCoordinator.getRouteLink(item.t, { name: item.name }); - - return ( - } - icon={icon} - /> - ); -}; - -export default memo(UserItem); diff --git a/apps/meteor/client/sidebarv2/sections/AirGappedRestrictionBanner/AirGappedRestrictionBanner.tsx b/apps/meteor/client/sidebarv2/sections/AirGappedRestrictionBanner/AirGappedRestrictionBanner.tsx deleted file mode 100644 index ff8c53bf484a..000000000000 --- a/apps/meteor/client/sidebarv2/sections/AirGappedRestrictionBanner/AirGappedRestrictionBanner.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { SidebarV2Banner } from '@rocket.chat/fuselage'; -import React from 'react'; -import { useTranslation } from 'react-i18next'; - -import AirGappedRestrictionWarning from './AirGappedRestrictionWarning'; - -const AirGappedRestrictionSection = ({ isRestricted, remainingDays }: { isRestricted: boolean; remainingDays: number }) => { - const { t } = useTranslation(); - - return ( - } - linkText={t('Learn_more')} - linkProps={{ - target: '_blank', - rel: 'noopener noreferrer', - href: 'https://go.rocket.chat/i/airgapped-restriction', - }} - /> - ); -}; - -export default AirGappedRestrictionSection; diff --git a/apps/meteor/client/sidebarv2/sections/AirGappedRestrictionBanner/AirGappedRestrictionWarning.tsx b/apps/meteor/client/sidebarv2/sections/AirGappedRestrictionBanner/AirGappedRestrictionWarning.tsx deleted file mode 100644 index 5c1555c8408b..000000000000 --- a/apps/meteor/client/sidebarv2/sections/AirGappedRestrictionBanner/AirGappedRestrictionWarning.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { Box } from '@rocket.chat/fuselage'; -import React from 'react'; -import { Trans } from 'react-i18next'; - -const AirGappedRestrictionWarning = ({ isRestricted, remainingDays }: { isRestricted: boolean; remainingDays: number }) => { - if (isRestricted) { - return ( - - This air-gapped workspace is in read-only mode.{' '} - - Connect it to internet or upgraded to a premium plan to restore full functionality. - - - ); - } - - return ( - - This air-gapped workspace will enter read-only mode in <>{{ remainingDays }} days.{' '} - - Connect it to internet or upgrade to a premium plan to prevent this. - - - ); -}; - -export default AirGappedRestrictionWarning; diff --git a/apps/meteor/client/sidebarv2/sections/BannerSection.spec.tsx b/apps/meteor/client/sidebarv2/sections/BannerSection.spec.tsx deleted file mode 100644 index 9486d34a17bc..000000000000 --- a/apps/meteor/client/sidebarv2/sections/BannerSection.spec.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import { mockAppRoot } from '@rocket.chat/mock-providers'; -import { render, screen } from '@testing-library/react'; -import React from 'react'; - -import BannerSection from './BannerSection'; - -// TODO: test presence banner -describe('Sidebar -> BannerSection -> Airgapped restriction', () => { - it('Should render null if restricted and not admin', () => { - render(, { - legacyRoot: true, - wrapper: mockAppRoot() - .withJohnDoe({ roles: ['user'] }) - .withSetting('Cloud_Workspace_AirGapped_Restrictions_Remaining_Days', 0) - .build(), - }); - - expect(screen.queryByText('air-gapped', { exact: false })).not.toBeInTheDocument(); - }); - - it('Should render null if admin and not restricted or warning', () => { - render(, { - legacyRoot: true, - wrapper: mockAppRoot().withJohnDoe().withSetting('Cloud_Workspace_AirGapped_Restrictions_Remaining_Days', 8).build(), - }); - - expect(screen.queryByText('air-gapped', { exact: false })).not.toBeInTheDocument(); - }); - - it('Should render warning message if admin and warning phase', () => { - render(, { - legacyRoot: true, - wrapper: mockAppRoot() - .withJohnDoe() - .withRole('admin') - .withSetting('Cloud_Workspace_AirGapped_Restrictions_Remaining_Days', 7) - .build(), - }); - - expect(screen.getByText('will enter read-only', { exact: false })).toBeInTheDocument(); - }); - - it('Should render restriction message if admin and restricted phase', () => { - render(, { - legacyRoot: true, - wrapper: mockAppRoot() - .withJohnDoe() - .withRole('admin') - .withSetting('Cloud_Workspace_AirGapped_Restrictions_Remaining_Days', 0) - .build(), - }); - - expect(screen.getByText('is in read-only', { exact: false })).toBeInTheDocument(); - }); - - it('Should render restriction message instead of another banner', () => { - render(, { - legacyRoot: true, - wrapper: mockAppRoot() - .withJohnDoe() - .withRole('admin') - .withSetting('Cloud_Workspace_AirGapped_Restrictions_Remaining_Days', 0) - .withSetting('Presence_broadcast_disabled', true) - .build(), - }); - - expect(screen.getByText('is in read-only', { exact: false })).toBeInTheDocument(); - }); -}); diff --git a/apps/meteor/client/sidebarv2/sections/BannerSection.tsx b/apps/meteor/client/sidebarv2/sections/BannerSection.tsx deleted file mode 100644 index a69c1b951b65..000000000000 --- a/apps/meteor/client/sidebarv2/sections/BannerSection.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { useSessionStorage } from '@rocket.chat/fuselage-hooks'; -import { useRole, useSetting } from '@rocket.chat/ui-contexts'; -import React from 'react'; - -import AirGappedRestrictionBanner from './AirGappedRestrictionBanner/AirGappedRestrictionBanner'; -import StatusDisabledBanner from './StatusDisabledBanner'; -import { useAirGappedRestriction } from '../../hooks/useAirGappedRestriction'; - -const BannerSection = () => { - const [isRestricted, isWarning, remainingDays] = useAirGappedRestriction(); - const isAdmin = useRole('admin'); - - const [bannerDismissed, setBannerDismissed] = useSessionStorage('presence_cap_notifier', false); - const presenceDisabled = useSetting('Presence_broadcast_disabled', false); - - if ((isWarning || isRestricted) && isAdmin) { - return ; - } - - if (presenceDisabled && !bannerDismissed) { - return setBannerDismissed(true)} />; - } - - return null; -}; - -export default BannerSection; diff --git a/apps/meteor/client/sidebarv2/sections/StatusDisabledBanner.tsx b/apps/meteor/client/sidebarv2/sections/StatusDisabledBanner.tsx deleted file mode 100644 index 9994a0e66e77..000000000000 --- a/apps/meteor/client/sidebarv2/sections/StatusDisabledBanner.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { SidebarV2Banner } from '@rocket.chat/fuselage'; -import React from 'react'; -import { useTranslation } from 'react-i18next'; - -import { useStatusDisabledModal } from '../../views/admin/customUserStatus/hooks/useStatusDisabledModal'; - -type StatusDisabledSectionProps = { onDismiss: () => void }; - -const StatusDisabledSection = ({ onDismiss }: StatusDisabledSectionProps) => { - const { t } = useTranslation(); - const handleStatusDisabledModal = useStatusDisabledModal(); - - return ( - - ); -}; - -export default StatusDisabledSection; diff --git a/apps/meteor/client/views/room/Sidepanel/SidepanelItem/RoomSidepanelItem.tsx b/apps/meteor/client/views/room/Sidepanel/SidepanelItem/RoomSidepanelItem.tsx index 4181b13765de..241d5e00cf64 100644 --- a/apps/meteor/client/views/room/Sidepanel/SidepanelItem/RoomSidepanelItem.tsx +++ b/apps/meteor/client/views/room/Sidepanel/SidepanelItem/RoomSidepanelItem.tsx @@ -3,7 +3,7 @@ import { useUserSubscription } from '@rocket.chat/ui-contexts'; import React, { memo } from 'react'; import { goToRoomById } from '../../../../lib/utils/goToRoomById'; -import { useTemplateByViewMode } from '../../../../sidebarv2/hooks/useTemplateByViewMode'; +import { useTemplateByViewMode } from '../../../../sidebar/hooks/useTemplateByViewMode'; import { useItemData } from '../hooks/useItemData'; type RoomSidepanelItemProps = { diff --git a/apps/meteor/client/views/room/Sidepanel/hooks/useItemData.tsx b/apps/meteor/client/views/room/Sidepanel/hooks/useItemData.tsx index 8e8cb798d2f7..73929ef6c9ca 100644 --- a/apps/meteor/client/views/room/Sidepanel/hooks/useItemData.tsx +++ b/apps/meteor/client/views/room/Sidepanel/hooks/useItemData.tsx @@ -5,9 +5,9 @@ import { useTranslation } from 'react-i18next'; import { RoomIcon } from '../../../../components/RoomIcon'; import { roomCoordinator } from '../../../../lib/rooms/roomCoordinator'; -import { getMessage } from '../../../../sidebarv2/RoomList/SidebarItemTemplateWithData'; -import { useAvatarTemplate } from '../../../../sidebarv2/hooks/useAvatarTemplate'; -import { useUnreadDisplay } from '../../../../sidebarv2/hooks/useUnreadDisplay'; +import { getMessage } from '../../../../sidebar/RoomList/SidebarItemTemplateWithData'; +import { useAvatarTemplate } from '../../../../sidebar/hooks/useAvatarTemplate'; +import { useUnreadDisplay } from '../../../../sidebar/hooks/useUnreadDisplay'; export const useItemData = ( room: ISubscription & IRoom, diff --git a/apps/meteor/client/views/root/MainLayout/LayoutWithSidebarV2.tsx b/apps/meteor/client/views/root/MainLayout/LayoutWithSidebarV2.tsx index e2e3c46ff189..198de6279292 100644 --- a/apps/meteor/client/views/root/MainLayout/LayoutWithSidebarV2.tsx +++ b/apps/meteor/client/views/root/MainLayout/LayoutWithSidebarV2.tsx @@ -7,7 +7,7 @@ import React, { useEffect, useRef } from 'react'; import AccessibilityShortcut from './AccessibilityShortcut'; import { MainLayoutStyleTags } from './MainLayoutStyleTags'; import NavBar from '../../../navbar'; -import Sidebar from '../../../sidebarv2'; +import Sidebar from '../../../sidebar'; const LayoutWithSidebarV2 = ({ children }: { children: ReactNode }): ReactElement => { const { isEmbedded: embeddedLayout } = useLayout(); From f846352a03786983c5a973347ceefc792fed94eb Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Mon, 2 Dec 2024 11:57:33 -0300 Subject: [PATCH 03/24] feat: delete `client/views/room/Header` and rename `client/views/room/HeaderV2` to `client/views/room/Header` --- .../views/room/Header/DirectRoomHeader.tsx | 33 -- .../room/Header/FederatedRoomOriginServer.tsx | 4 +- .../client/views/room/Header/Header.tsx | 17 +- .../views/room/Header/HeaderIconWithRoom.tsx | 1 + .../views/room/Header/HeaderSkeleton.tsx | 7 +- .../room/Header/Omnichannel/BackButton.tsx | 8 +- .../Omnichannel/OmnichannelRoomHeader.tsx | 2 +- .../QuickActions/hooks/useQuickActions.tsx | 4 +- .../Header/Omnichannel/VoipRoomHeader.tsx | 2 +- .../client/views/room/Header/ParentRoom.tsx | 3 +- .../views/room/Header/ParentRoomWithData.tsx | 3 +- .../Header/ParentRoomWithEndpointData.tsx | 3 +- .../client/views/room/Header/ParentTeam.tsx | 7 +- .../client/views/room/Header/RoomHeader.tsx | 15 +- .../room/{HeaderV2 => Header}/RoomLeader.tsx | 0 .../client/views/room/Header/RoomTitle.tsx | 6 +- .../room/Header/RoomToolbox/RoomToolbox.tsx | 4 +- .../RoomToolbox/RoomToolboxE2EESetup.tsx | 8 +- apps/meteor/client/views/room/Header/index.ts | 2 +- .../HeaderV2/FederatedRoomOriginServer.tsx | 24 -- .../client/views/room/HeaderV2/Header.tsx | 55 --- .../room/HeaderV2/HeaderIconWithRoom.tsx | 23 -- .../views/room/HeaderV2/HeaderSkeleton.tsx | 21 - .../room/HeaderV2/Omnichannel/BackButton.tsx | 36 -- .../Omnichannel/OmnichannelRoomHeader.tsx | 57 --- .../Omnichannel/OmnichannelRoomHeaderTag.tsx | 20 - .../QuickActions/QuickActionOptions.tsx | 48 --- .../Omnichannel/QuickActions/QuickActions.tsx | 46 --- .../hooks/usePutChatOnHoldMutation.ts | 29 -- .../QuickActions/hooks/useQuickActions.tsx | 360 ------------------ .../hooks/useReturnChatToQueueMutation.ts | 30 -- .../Omnichannel/QuickActions/index.ts | 3 - .../HeaderV2/Omnichannel/VoipRoomHeader.tsx | 42 -- .../client/views/room/HeaderV2/ParentRoom.tsx | 30 -- .../room/HeaderV2/ParentRoomWithData.tsx | 28 -- .../HeaderV2/ParentRoomWithEndpointData.tsx | 26 -- .../client/views/room/HeaderV2/ParentTeam.tsx | 79 ---- .../client/views/room/HeaderV2/RoomHeader.tsx | 69 ---- .../room/HeaderV2/RoomHeaderE2EESetup.tsx | 23 -- .../client/views/room/HeaderV2/RoomTitle.tsx | 54 --- .../room/HeaderV2/RoomToolbox/RoomToolbox.tsx | 102 ----- .../RoomToolbox/RoomToolboxE2EESetup.tsx | 41 -- .../views/room/HeaderV2/RoomToolbox/index.ts | 3 - .../views/room/HeaderV2/icons/Encrypted.tsx | 15 - .../views/room/HeaderV2/icons/Favorite.tsx | 42 -- .../views/room/HeaderV2/icons/Translate.tsx | 21 - .../client/views/room/HeaderV2/index.ts | 1 - apps/meteor/client/views/room/Room.tsx | 2 +- .../meteor/client/views/room/RoomSkeleton.tsx | 2 +- .../client/views/room/body/RoomTopic.tsx | 2 +- .../client/views/room/layout/RoomLayout.tsx | 2 +- 51 files changed, 43 insertions(+), 1422 deletions(-) delete mode 100644 apps/meteor/client/views/room/Header/DirectRoomHeader.tsx rename apps/meteor/client/views/room/{HeaderV2 => Header}/RoomLeader.tsx (100%) delete mode 100644 apps/meteor/client/views/room/HeaderV2/FederatedRoomOriginServer.tsx delete mode 100644 apps/meteor/client/views/room/HeaderV2/Header.tsx delete mode 100644 apps/meteor/client/views/room/HeaderV2/HeaderIconWithRoom.tsx delete mode 100644 apps/meteor/client/views/room/HeaderV2/HeaderSkeleton.tsx delete mode 100644 apps/meteor/client/views/room/HeaderV2/Omnichannel/BackButton.tsx delete mode 100644 apps/meteor/client/views/room/HeaderV2/Omnichannel/OmnichannelRoomHeader.tsx delete mode 100644 apps/meteor/client/views/room/HeaderV2/Omnichannel/OmnichannelRoomHeaderTag.tsx delete mode 100644 apps/meteor/client/views/room/HeaderV2/Omnichannel/QuickActions/QuickActionOptions.tsx delete mode 100644 apps/meteor/client/views/room/HeaderV2/Omnichannel/QuickActions/QuickActions.tsx delete mode 100644 apps/meteor/client/views/room/HeaderV2/Omnichannel/QuickActions/hooks/usePutChatOnHoldMutation.ts delete mode 100644 apps/meteor/client/views/room/HeaderV2/Omnichannel/QuickActions/hooks/useQuickActions.tsx delete mode 100644 apps/meteor/client/views/room/HeaderV2/Omnichannel/QuickActions/hooks/useReturnChatToQueueMutation.ts delete mode 100644 apps/meteor/client/views/room/HeaderV2/Omnichannel/QuickActions/index.ts delete mode 100644 apps/meteor/client/views/room/HeaderV2/Omnichannel/VoipRoomHeader.tsx delete mode 100644 apps/meteor/client/views/room/HeaderV2/ParentRoom.tsx delete mode 100644 apps/meteor/client/views/room/HeaderV2/ParentRoomWithData.tsx delete mode 100644 apps/meteor/client/views/room/HeaderV2/ParentRoomWithEndpointData.tsx delete mode 100644 apps/meteor/client/views/room/HeaderV2/ParentTeam.tsx delete mode 100644 apps/meteor/client/views/room/HeaderV2/RoomHeader.tsx delete mode 100644 apps/meteor/client/views/room/HeaderV2/RoomHeaderE2EESetup.tsx delete mode 100644 apps/meteor/client/views/room/HeaderV2/RoomTitle.tsx delete mode 100644 apps/meteor/client/views/room/HeaderV2/RoomToolbox/RoomToolbox.tsx delete mode 100644 apps/meteor/client/views/room/HeaderV2/RoomToolbox/RoomToolboxE2EESetup.tsx delete mode 100644 apps/meteor/client/views/room/HeaderV2/RoomToolbox/index.ts delete mode 100644 apps/meteor/client/views/room/HeaderV2/icons/Encrypted.tsx delete mode 100644 apps/meteor/client/views/room/HeaderV2/icons/Favorite.tsx delete mode 100644 apps/meteor/client/views/room/HeaderV2/icons/Translate.tsx delete mode 100644 apps/meteor/client/views/room/HeaderV2/index.ts diff --git a/apps/meteor/client/views/room/Header/DirectRoomHeader.tsx b/apps/meteor/client/views/room/Header/DirectRoomHeader.tsx deleted file mode 100644 index 6446e3455344..000000000000 --- a/apps/meteor/client/views/room/Header/DirectRoomHeader.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import type { IRoom } from '@rocket.chat/core-typings'; -import { useUserId } from '@rocket.chat/ui-contexts'; -import type { ReactElement } from 'react'; -import React from 'react'; - -import RoomHeader from './RoomHeader'; -import { usePresence } from '../../../hooks/usePresence'; - -type DirectRoomHeaderProps = { - room: IRoom; - slots: { - start?: unknown; - preContent?: unknown; - insideContent?: unknown; - posContent?: unknown; - end?: unknown; - toolbox?: { - pre?: unknown; - content?: unknown; - pos?: unknown; - }; - }; -}; - -const DirectRoomHeader = ({ room, slots }: DirectRoomHeaderProps): ReactElement => { - const userId = useUserId(); - const directUserId = room.uids?.filter((uid) => uid !== userId).shift(); - const directUserData = usePresence(directUserId); - - return ; -}; - -export default DirectRoomHeader; diff --git a/apps/meteor/client/views/room/Header/FederatedRoomOriginServer.tsx b/apps/meteor/client/views/room/Header/FederatedRoomOriginServer.tsx index 1f22f6466719..a8731663b28b 100644 --- a/apps/meteor/client/views/room/Header/FederatedRoomOriginServer.tsx +++ b/apps/meteor/client/views/room/Header/FederatedRoomOriginServer.tsx @@ -4,11 +4,11 @@ import React, { useMemo } from 'react'; import { HeaderTag, HeaderTagIcon } from '../../../components/Header'; import type { IRoomWithFederationOriginalName } from '../contexts/RoomContext'; -type FederatedRoomProps = { +type FederatedRoomOriginServerProps = { room: IRoomWithFederationOriginalName; }; -const FederatedRoomOriginServer = ({ room }: FederatedRoomProps): ReactElement | null => { +const FederatedRoomOriginServer = ({ room }: FederatedRoomOriginServerProps): ReactElement | null => { const originServerName = useMemo(() => room.federationOriginalName?.split(':')[1], [room.federationOriginalName]); if (!originServerName) { return null; diff --git a/apps/meteor/client/views/room/Header/Header.tsx b/apps/meteor/client/views/room/Header/Header.tsx index e63c3864195d..bcf701ab35e9 100644 --- a/apps/meteor/client/views/room/Header/Header.tsx +++ b/apps/meteor/client/views/room/Header/Header.tsx @@ -1,5 +1,5 @@ import type { IRoom } from '@rocket.chat/core-typings'; -import { isDirectMessageRoom, isVoipRoom } from '@rocket.chat/core-typings'; +import { isVoipRoom } from '@rocket.chat/core-typings'; import { useLayout, useSetting } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React, { lazy, memo, useMemo } from 'react'; @@ -10,14 +10,13 @@ import SidebarToggler from '../../../components/SidebarToggler'; const OmnichannelRoomHeader = lazy(() => import('./Omnichannel/OmnichannelRoomHeader')); const VoipRoomHeader = lazy(() => import('./Omnichannel/VoipRoomHeader')); const RoomHeaderE2EESetup = lazy(() => import('./RoomHeaderE2EESetup')); -const DirectRoomHeader = lazy(() => import('./DirectRoomHeader')); const RoomHeader = lazy(() => import('./RoomHeader')); -type HeaderProps = { - room: T; +type HeaderProps = { + room: IRoom; }; -const Header = ({ room }: HeaderProps): ReactElement | null => { +const Header = ({ room }: HeaderProps): ReactElement | null => { const { isMobile, isEmbedded, showTopNavbarEmbeddedLayout } = useLayout(); const encrypted = Boolean(room.encrypted); const unencryptedMessagesAllowed = useSetting('E2E_Allow_Unencrypted_Messages', false); @@ -47,14 +46,10 @@ const Header = ({ room }: HeaderProps): ReactElement | null => { } if (shouldDisplayE2EESetup) { - return ; + return ; } - if (isDirectMessageRoom(room) && (room.uids?.length ?? 0) < 3) { - return ; - } - - return ; + return ; }; export default memo(Header); diff --git a/apps/meteor/client/views/room/Header/HeaderIconWithRoom.tsx b/apps/meteor/client/views/room/Header/HeaderIconWithRoom.tsx index 98eb417cd611..33f34ec7a86a 100644 --- a/apps/meteor/client/views/room/Header/HeaderIconWithRoom.tsx +++ b/apps/meteor/client/views/room/Header/HeaderIconWithRoom.tsx @@ -19,4 +19,5 @@ const HeaderIconWithRoom = ({ room }: HeaderIconWithRoomProps): ReactElement => return ; }; + export default HeaderIconWithRoom; diff --git a/apps/meteor/client/views/room/Header/HeaderSkeleton.tsx b/apps/meteor/client/views/room/Header/HeaderSkeleton.tsx index af69131ea897..2c14c154c007 100644 --- a/apps/meteor/client/views/room/Header/HeaderSkeleton.tsx +++ b/apps/meteor/client/views/room/Header/HeaderSkeleton.tsx @@ -7,14 +7,11 @@ const HeaderSkeleton = () => { return (
- + - - - - +
diff --git a/apps/meteor/client/views/room/Header/Omnichannel/BackButton.tsx b/apps/meteor/client/views/room/Header/Omnichannel/BackButton.tsx index fb3cbd97a73c..5ad221129ae3 100644 --- a/apps/meteor/client/views/room/Header/Omnichannel/BackButton.tsx +++ b/apps/meteor/client/views/room/Header/Omnichannel/BackButton.tsx @@ -6,7 +6,9 @@ import { useTranslation } from 'react-i18next'; import { HeaderToolbarAction } from '../../../../components/Header'; -export const BackButton = ({ routeName }: { routeName?: string }): ReactElement => { +type BackButtonProps = { routeName?: string }; + +const BackButton = ({ routeName }: BackButtonProps): ReactElement => { const router = useRouter(); const { t } = useTranslation(); @@ -17,7 +19,7 @@ export const BackButton = ({ routeName }: { routeName?: string }): ReactElement name: 'omnichannel-directory', params: { ...router.getRouteParameters(), - context: 'info', + bar: 'info', }, }); break; @@ -30,3 +32,5 @@ export const BackButton = ({ routeName }: { routeName?: string }): ReactElement return ; }; + +export default BackButton; diff --git a/apps/meteor/client/views/room/Header/Omnichannel/OmnichannelRoomHeader.tsx b/apps/meteor/client/views/room/Header/Omnichannel/OmnichannelRoomHeader.tsx index d814a30da0b0..8c72b22933ea 100644 --- a/apps/meteor/client/views/room/Header/Omnichannel/OmnichannelRoomHeader.tsx +++ b/apps/meteor/client/views/room/Header/Omnichannel/OmnichannelRoomHeader.tsx @@ -6,7 +6,7 @@ import { HeaderToolbar } from '../../../../components/Header'; import SidebarToggler from '../../../../components/SidebarToggler'; import { useOmnichannelRoom } from '../../contexts/RoomContext'; import RoomHeader from '../RoomHeader'; -import { BackButton } from './BackButton'; +import BackButton from './BackButton'; import OmnichannelRoomHeaderTag from './OmnichannelRoomHeaderTag'; import QuickActions from './QuickActions'; diff --git a/apps/meteor/client/views/room/Header/Omnichannel/QuickActions/hooks/useQuickActions.tsx b/apps/meteor/client/views/room/Header/Omnichannel/QuickActions/hooks/useQuickActions.tsx index c5fd6c51d0c2..9fb85a581ace 100644 --- a/apps/meteor/client/views/room/Header/Omnichannel/QuickActions/hooks/useQuickActions.tsx +++ b/apps/meteor/client/views/room/Header/Omnichannel/QuickActions/hooks/useQuickActions.tsx @@ -10,7 +10,6 @@ import { useMethod, useTranslation, useRouter, - useUserSubscription, } from '@rocket.chat/ui-contexts'; import React, { useCallback, useState, useEffect } from 'react'; @@ -48,7 +47,6 @@ export const useQuickActions = (): { const visitorRoomId = room.v._id; const rid = room._id; const uid = useUserId(); - const subscription = useUserSubscription(rid); const roomLastMessage = room.lastMessage; const getVisitorInfo = useEndpoint('GET', '/v1/livechat/visitors.info'); @@ -332,7 +330,7 @@ export const useQuickActions = (): { case QuickActionsEnum.TranscriptPDF: return hasLicense && !isRoomOverMacLimit && canSendTranscriptPDF; case QuickActionsEnum.CloseChat: - return (subscription && (canCloseRoom || canCloseOthersRoom)) || (!!roomOpen && canCloseOthersRoom); + return !!roomOpen && (canCloseRoom || canCloseOthersRoom); case QuickActionsEnum.OnHoldChat: return !!roomOpen && canPlaceChatOnHold; default: diff --git a/apps/meteor/client/views/room/Header/Omnichannel/VoipRoomHeader.tsx b/apps/meteor/client/views/room/Header/Omnichannel/VoipRoomHeader.tsx index 235d50ffa499..c79f8999f1a8 100644 --- a/apps/meteor/client/views/room/Header/Omnichannel/VoipRoomHeader.tsx +++ b/apps/meteor/client/views/room/Header/Omnichannel/VoipRoomHeader.tsx @@ -8,7 +8,7 @@ import SidebarToggler from '../../../../components/SidebarToggler'; import { parseOutboundPhoneNumber } from '../../../../lib/voip/parseOutboundPhoneNumber'; import type { RoomHeaderProps } from '../RoomHeader'; import RoomHeader from '../RoomHeader'; -import { BackButton } from './BackButton'; +import BackButton from './BackButton'; type VoipRoomHeaderProps = { room: IVoipRoom; diff --git a/apps/meteor/client/views/room/Header/ParentRoom.tsx b/apps/meteor/client/views/room/Header/ParentRoom.tsx index 5907b3019084..0c53d790caf8 100644 --- a/apps/meteor/client/views/room/Header/ParentRoom.tsx +++ b/apps/meteor/client/views/room/Header/ParentRoom.tsx @@ -1,5 +1,4 @@ import type { IRoom } from '@rocket.chat/core-typings'; -import type { ReactElement } from 'react'; import React from 'react'; import { HeaderTag, HeaderTagIcon } from '../../../components/Header'; @@ -10,7 +9,7 @@ type ParentRoomProps = { room: Pick; }; -const ParentRoom = ({ room }: ParentRoomProps): ReactElement => { +const ParentRoom = ({ room }: ParentRoomProps) => { const icon = useRoomIcon(room); const handleRedirect = (): void => roomCoordinator.openRouteLink(room.t, { rid: room._id, ...room }); diff --git a/apps/meteor/client/views/room/Header/ParentRoomWithData.tsx b/apps/meteor/client/views/room/Header/ParentRoomWithData.tsx index 0e11c33aed4e..aed3adc53b39 100644 --- a/apps/meteor/client/views/room/Header/ParentRoomWithData.tsx +++ b/apps/meteor/client/views/room/Header/ParentRoomWithData.tsx @@ -1,6 +1,5 @@ import type { IRoom } from '@rocket.chat/core-typings'; import { useUserSubscription } from '@rocket.chat/ui-contexts'; -import type { ReactElement } from 'react'; import React from 'react'; import ParentRoom from './ParentRoom'; @@ -10,7 +9,7 @@ type ParentRoomWithDataProps = { room: IRoom; }; -const ParentRoomWithData = ({ room }: ParentRoomWithDataProps): ReactElement => { +const ParentRoomWithData = ({ room }: ParentRoomWithDataProps) => { const { prid } = room; if (!prid) { diff --git a/apps/meteor/client/views/room/Header/ParentRoomWithEndpointData.tsx b/apps/meteor/client/views/room/Header/ParentRoomWithEndpointData.tsx index 27c397d06ce4..08888fc243a4 100644 --- a/apps/meteor/client/views/room/Header/ParentRoomWithEndpointData.tsx +++ b/apps/meteor/client/views/room/Header/ParentRoomWithEndpointData.tsx @@ -1,5 +1,4 @@ import type { IRoom } from '@rocket.chat/core-typings'; -import type { ReactElement } from 'react'; import React from 'react'; import ParentRoom from './ParentRoom'; @@ -10,7 +9,7 @@ type ParentRoomWithEndpointDataProps = { rid: IRoom['_id']; }; -const ParentRoomWithEndpointData = ({ rid }: ParentRoomWithEndpointDataProps): ReactElement | null => { +const ParentRoomWithEndpointData = ({ rid }: ParentRoomWithEndpointDataProps) => { const { data, isLoading, isError } = useRoomInfoEndpoint(rid); if (isLoading) { diff --git a/apps/meteor/client/views/room/Header/ParentTeam.tsx b/apps/meteor/client/views/room/Header/ParentTeam.tsx index ed4a4588ef21..2f8bfa57c566 100644 --- a/apps/meteor/client/views/room/Header/ParentTeam.tsx +++ b/apps/meteor/client/views/room/Header/ParentTeam.tsx @@ -2,7 +2,6 @@ import type { IRoom } from '@rocket.chat/core-typings'; import { TEAM_TYPE } from '@rocket.chat/core-typings'; import { useUserId, useEndpoint } from '@rocket.chat/ui-contexts'; import { useQuery } from '@tanstack/react-query'; -import type { ReactElement } from 'react'; import React from 'react'; import { HeaderTag, HeaderTagIcon, HeaderTagSkeleton } from '../../../components/Header'; @@ -10,7 +9,11 @@ import { goToRoomById } from '../../../lib/utils/goToRoomById'; type APIErrorResult = { success: boolean; error: string }; -const ParentTeam = ({ room }: { room: IRoom }): ReactElement | null => { +type ParentTeamProps = { + room: IRoom; +}; + +const ParentTeam = ({ room }: ParentTeamProps) => { const { teamId } = room; const userId = useUserId(); diff --git a/apps/meteor/client/views/room/Header/RoomHeader.tsx b/apps/meteor/client/views/room/Header/RoomHeader.tsx index 1ba0ca80cd6a..82d63485d026 100644 --- a/apps/meteor/client/views/room/Header/RoomHeader.tsx +++ b/apps/meteor/client/views/room/Header/RoomHeader.tsx @@ -12,12 +12,10 @@ import RoomToolbox from './RoomToolbox'; import Encrypted from './icons/Encrypted'; import Favorite from './icons/Favorite'; import Translate from './icons/Translate'; -import { Header, HeaderAvatar, HeaderContent, HeaderContentRow, HeaderSubtitle, HeaderToolbar } from '../../../components/Header'; -import MarkdownText from '../../../components/MarkdownText'; +import { Header, HeaderAvatar, HeaderContent, HeaderContentRow, HeaderToolbar } from '../../../components/Header'; export type RoomHeaderProps = { room: IRoom; - topic?: string; slots: { start?: unknown; preContent?: unknown; @@ -33,14 +31,14 @@ export type RoomHeaderProps = { roomToolbox?: JSX.Element; }; -const RoomHeader = ({ room, topic = '', slots = {}, roomToolbox }: RoomHeaderProps) => { +const RoomHeader = ({ room, slots = {}, roomToolbox }: RoomHeaderProps) => { const { t } = useTranslation(); return (
{slots?.start} - + {slots?.preContent} @@ -54,13 +52,6 @@ const RoomHeader = ({ room, topic = '', slots = {}, roomToolbox }: RoomHeaderPro {slots?.insideContent} - {topic && ( - - - - - - )} {slots?.posContent} diff --git a/apps/meteor/client/views/room/HeaderV2/RoomLeader.tsx b/apps/meteor/client/views/room/Header/RoomLeader.tsx similarity index 100% rename from apps/meteor/client/views/room/HeaderV2/RoomLeader.tsx rename to apps/meteor/client/views/room/Header/RoomLeader.tsx diff --git a/apps/meteor/client/views/room/Header/RoomTitle.tsx b/apps/meteor/client/views/room/Header/RoomTitle.tsx index b481586d7339..9b8011737636 100644 --- a/apps/meteor/client/views/room/Header/RoomTitle.tsx +++ b/apps/meteor/client/views/room/Header/RoomTitle.tsx @@ -1,14 +1,16 @@ import { isTeamRoom, type IRoom } from '@rocket.chat/core-typings'; import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useDocumentTitle } from '@rocket.chat/ui-client'; -import type { KeyboardEvent, ReactElement } from 'react'; +import type { KeyboardEvent } from 'react'; import React from 'react'; import HeaderIconWithRoom from './HeaderIconWithRoom'; import { HeaderTitle, HeaderTitleButton } from '../../../components/Header'; import { useRoomToolbox } from '../contexts/RoomToolboxContext'; -const RoomTitle = ({ room }: { room: IRoom }): ReactElement => { +type RoomTitleProps = { room: IRoom }; + +const RoomTitle = ({ room }: RoomTitleProps) => { useDocumentTitle(room.name, false); const { openTab } = useRoomToolbox(); diff --git a/apps/meteor/client/views/room/Header/RoomToolbox/RoomToolbox.tsx b/apps/meteor/client/views/room/Header/RoomToolbox/RoomToolbox.tsx index bd7d6000db58..5c0aeb430478 100644 --- a/apps/meteor/client/views/room/Header/RoomToolbox/RoomToolbox.tsx +++ b/apps/meteor/client/views/room/Header/RoomToolbox/RoomToolbox.tsx @@ -1,5 +1,5 @@ import type { Box } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { GenericMenu } from '@rocket.chat/ui-client'; import type { GenericMenuItemProps } from '@rocket.chat/ui-client'; import { useLayout } from '@rocket.chat/ui-contexts'; @@ -58,7 +58,7 @@ const RoomToolbox = ({ className }: RoomToolboxProps) => { return acc; }, [] as MenuActionsProps); - const renderDefaultToolboxItem: RoomToolboxActionConfig['renderToolboxItem'] = useMutableCallback( + const renderDefaultToolboxItem: RoomToolboxActionConfig['renderToolboxItem'] = useEffectEvent( ({ id, className, index, icon, title, toolbox: { tab }, action, disabled, tooltip }) => { return ( { 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))), - ), + .filter((roomAction): roomAction is RoomToolboxActionConfig => !!roomAction), ); return ( diff --git a/apps/meteor/client/views/room/Header/index.ts b/apps/meteor/client/views/room/Header/index.ts index 579f1ac23fcf..a38c9709c31b 100644 --- a/apps/meteor/client/views/room/Header/index.ts +++ b/apps/meteor/client/views/room/Header/index.ts @@ -1 +1 @@ -export { default } from './Header'; +export { default as HeaderV2 } from './Header'; diff --git a/apps/meteor/client/views/room/HeaderV2/FederatedRoomOriginServer.tsx b/apps/meteor/client/views/room/HeaderV2/FederatedRoomOriginServer.tsx deleted file mode 100644 index a8731663b28b..000000000000 --- a/apps/meteor/client/views/room/HeaderV2/FederatedRoomOriginServer.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import type { ReactElement } from 'react'; -import React, { useMemo } from 'react'; - -import { HeaderTag, HeaderTagIcon } from '../../../components/Header'; -import type { IRoomWithFederationOriginalName } from '../contexts/RoomContext'; - -type FederatedRoomOriginServerProps = { - room: IRoomWithFederationOriginalName; -}; - -const FederatedRoomOriginServer = ({ room }: FederatedRoomOriginServerProps): ReactElement | null => { - const originServerName = useMemo(() => room.federationOriginalName?.split(':')[1], [room.federationOriginalName]); - if (!originServerName) { - return null; - } - return ( - - - {originServerName} - - ); -}; - -export default FederatedRoomOriginServer; diff --git a/apps/meteor/client/views/room/HeaderV2/Header.tsx b/apps/meteor/client/views/room/HeaderV2/Header.tsx deleted file mode 100644 index bcf701ab35e9..000000000000 --- a/apps/meteor/client/views/room/HeaderV2/Header.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import type { IRoom } from '@rocket.chat/core-typings'; -import { isVoipRoom } from '@rocket.chat/core-typings'; -import { useLayout, useSetting } from '@rocket.chat/ui-contexts'; -import type { ReactElement } from 'react'; -import React, { lazy, memo, useMemo } from 'react'; - -import { HeaderToolbar } from '../../../components/Header'; -import SidebarToggler from '../../../components/SidebarToggler'; - -const OmnichannelRoomHeader = lazy(() => import('./Omnichannel/OmnichannelRoomHeader')); -const VoipRoomHeader = lazy(() => import('./Omnichannel/VoipRoomHeader')); -const RoomHeaderE2EESetup = lazy(() => import('./RoomHeaderE2EESetup')); -const RoomHeader = lazy(() => import('./RoomHeader')); - -type HeaderProps = { - room: IRoom; -}; - -const Header = ({ room }: HeaderProps): ReactElement | null => { - const { isMobile, isEmbedded, showTopNavbarEmbeddedLayout } = useLayout(); - const encrypted = Boolean(room.encrypted); - const unencryptedMessagesAllowed = useSetting('E2E_Allow_Unencrypted_Messages', false); - const shouldDisplayE2EESetup = encrypted && !unencryptedMessagesAllowed; - - const slots = useMemo( - () => ({ - start: isMobile && ( - - - - ), - }), - [isMobile], - ); - - if (isEmbedded && !showTopNavbarEmbeddedLayout) { - return null; - } - - if (room.t === 'l') { - return ; - } - - if (isVoipRoom(room)) { - return ; - } - - if (shouldDisplayE2EESetup) { - return ; - } - - return ; -}; - -export default memo(Header); diff --git a/apps/meteor/client/views/room/HeaderV2/HeaderIconWithRoom.tsx b/apps/meteor/client/views/room/HeaderV2/HeaderIconWithRoom.tsx deleted file mode 100644 index 33f34ec7a86a..000000000000 --- a/apps/meteor/client/views/room/HeaderV2/HeaderIconWithRoom.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import type { IRoom } from '@rocket.chat/core-typings'; -import { isOmnichannelRoom } from '@rocket.chat/core-typings'; -import type { ReactElement } from 'react'; -import React from 'react'; - -import { HeaderIcon } from '../../../components/Header'; -import { OmnichannelRoomIcon } from '../../../components/RoomIcon/OmnichannelRoomIcon'; -import { useRoomIcon } from '../../../hooks/useRoomIcon'; - -type HeaderIconWithRoomProps = { - room: IRoom; -}; - -const HeaderIconWithRoom = ({ room }: HeaderIconWithRoomProps): ReactElement => { - const icon = useRoomIcon(room); - if (isOmnichannelRoom(room)) { - return ; - } - - return ; -}; - -export default HeaderIconWithRoom; diff --git a/apps/meteor/client/views/room/HeaderV2/HeaderSkeleton.tsx b/apps/meteor/client/views/room/HeaderV2/HeaderSkeleton.tsx deleted file mode 100644 index 2c14c154c007..000000000000 --- a/apps/meteor/client/views/room/HeaderV2/HeaderSkeleton.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { Skeleton } from '@rocket.chat/fuselage'; -import React from 'react'; - -import { Header, HeaderAvatar, HeaderContent, HeaderContentRow } from '../../../components/Header'; - -const HeaderSkeleton = () => { - return ( -
- - - - - - - - -
- ); -}; - -export default HeaderSkeleton; diff --git a/apps/meteor/client/views/room/HeaderV2/Omnichannel/BackButton.tsx b/apps/meteor/client/views/room/HeaderV2/Omnichannel/BackButton.tsx deleted file mode 100644 index 5ad221129ae3..000000000000 --- a/apps/meteor/client/views/room/HeaderV2/Omnichannel/BackButton.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; -import { useRouter } from '@rocket.chat/ui-contexts'; -import type { ReactElement } from 'react'; -import React from 'react'; -import { useTranslation } from 'react-i18next'; - -import { HeaderToolbarAction } from '../../../../components/Header'; - -type BackButtonProps = { routeName?: string }; - -const BackButton = ({ routeName }: BackButtonProps): ReactElement => { - const router = useRouter(); - const { t } = useTranslation(); - - const back = useMutableCallback(() => { - switch (routeName) { - case 'omnichannel-directory': - router.navigate({ - name: 'omnichannel-directory', - params: { - ...router.getRouteParameters(), - bar: 'info', - }, - }); - break; - - case 'omnichannel-current-chats': - router.navigate({ name: 'omnichannel-current-chats' }); - break; - } - }); - - return ; -}; - -export default BackButton; diff --git a/apps/meteor/client/views/room/HeaderV2/Omnichannel/OmnichannelRoomHeader.tsx b/apps/meteor/client/views/room/HeaderV2/Omnichannel/OmnichannelRoomHeader.tsx deleted file mode 100644 index 8c72b22933ea..000000000000 --- a/apps/meteor/client/views/room/HeaderV2/Omnichannel/OmnichannelRoomHeader.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import { useLayout, useRouter } from '@rocket.chat/ui-contexts'; -import React, { useCallback, useMemo } from 'react'; -import { useSyncExternalStore } from 'use-sync-external-store/shim'; - -import { HeaderToolbar } from '../../../../components/Header'; -import SidebarToggler from '../../../../components/SidebarToggler'; -import { useOmnichannelRoom } from '../../contexts/RoomContext'; -import RoomHeader from '../RoomHeader'; -import BackButton from './BackButton'; -import OmnichannelRoomHeaderTag from './OmnichannelRoomHeaderTag'; -import QuickActions from './QuickActions'; - -type OmnichannelRoomHeaderProps = { - slots: { - start?: unknown; - preContent?: unknown; - insideContent?: unknown; - posContent?: unknown; - end?: unknown; - toolbox?: { - pre?: unknown; - content?: unknown; - pos?: unknown; - }; - }; -}; - -const OmnichannelRoomHeader = ({ slots: parentSlot }: OmnichannelRoomHeaderProps) => { - const router = useRouter(); - - const currentRouteName = useSyncExternalStore( - router.subscribeToRouteChange, - useCallback(() => router.getRouteName(), [router]), - ); - - const { isMobile } = useLayout(); - const room = useOmnichannelRoom(); - - const slots = useMemo( - () => ({ - ...parentSlot, - start: (!!isMobile || currentRouteName === 'omnichannel-directory' || currentRouteName === 'omnichannel-current-chats') && ( - - {isMobile && } - - - ), - insideContent: , - posContent: , - }), - [isMobile, currentRouteName, parentSlot], - ); - - return ; -}; - -export default OmnichannelRoomHeader; diff --git a/apps/meteor/client/views/room/HeaderV2/Omnichannel/OmnichannelRoomHeaderTag.tsx b/apps/meteor/client/views/room/HeaderV2/Omnichannel/OmnichannelRoomHeaderTag.tsx deleted file mode 100644 index ec02774dfc33..000000000000 --- a/apps/meteor/client/views/room/HeaderV2/Omnichannel/OmnichannelRoomHeaderTag.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { Box } from '@rocket.chat/fuselage'; -import { useSetModal } from '@rocket.chat/ui-contexts'; -import React from 'react'; - -import OmnichannelVerificationTag from '../../../omnichannel/components/OmnichannelVerificationTag'; -import AdvancedContactModal from '../../../omnichannel/contactInfo/AdvancedContactModal'; -import { useOmnichannelRoom } from '../../contexts/RoomContext'; - -const OmnichannelRoomHeaderTag = () => { - const setModal = useSetModal(); - const { verified } = useOmnichannelRoom(); - - return ( - - setModal( setModal(null)} />)} /> - - ); -}; - -export default OmnichannelRoomHeaderTag; diff --git a/apps/meteor/client/views/room/HeaderV2/Omnichannel/QuickActions/QuickActionOptions.tsx b/apps/meteor/client/views/room/HeaderV2/Omnichannel/QuickActions/QuickActionOptions.tsx deleted file mode 100644 index 36941e2c829e..000000000000 --- a/apps/meteor/client/views/room/HeaderV2/Omnichannel/QuickActions/QuickActionOptions.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import type { IOmnichannelRoom } from '@rocket.chat/core-typings'; -import { Box, Dropdown, Option } from '@rocket.chat/fuselage'; -import React, { memo, useRef } from 'react'; -import { useTranslation } from 'react-i18next'; - -import { HeaderToolbarAction } from '../../../../../components/Header'; -import { useDropdownVisibility } from '../../../../../sidebar/header/hooks/useDropdownVisibility'; -import type { QuickActionsActionOptions } from '../../../lib/quickActions'; - -type QuickActionOptionsProps = { - options: QuickActionsActionOptions; - action: (id: string) => void; - room: IOmnichannelRoom; -}; - -const QuickActionOptions = ({ options, room, action, ...props }: QuickActionOptionsProps) => { - const { t } = useTranslation(); - const reference = useRef(null); - const target = useRef(null); - const { isVisible, toggle } = useDropdownVisibility({ reference, target }); - - const handleClick = (id: string) => (): void => { - toggle(); - action(id); - }; - - return ( - <> - toggle()} secondary={isVisible} {...props} /> - {isVisible && ( - - {options.map(({ id, label, validate }) => { - const { value: valid = true, tooltip } = validate?.(room) || {}; - return ( - - ); - })} - - )} - - ); -}; - -export default memo(QuickActionOptions); diff --git a/apps/meteor/client/views/room/HeaderV2/Omnichannel/QuickActions/QuickActions.tsx b/apps/meteor/client/views/room/HeaderV2/Omnichannel/QuickActions/QuickActions.tsx deleted file mode 100644 index d3ca9d5bd750..000000000000 --- a/apps/meteor/client/views/room/HeaderV2/Omnichannel/QuickActions/QuickActions.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import type { Box } from '@rocket.chat/fuselage'; -import type { ComponentProps } from 'react'; -import React, { memo } from 'react'; -import { useTranslation } from 'react-i18next'; - -import QuickActionOptions from './QuickActionOptions'; -import { useQuickActions } from './hooks/useQuickActions'; -import { HeaderToolbar, HeaderToolbarAction, HeaderToolbarDivider } from '../../../../../components/Header'; -import { useOmnichannelRoom } from '../../../contexts/RoomContext'; - -type QuickActionsProps = { - className?: ComponentProps['className']; -}; - -const QuickActions = ({ className }: QuickActionsProps) => { - const { t } = useTranslation(); - const room = useOmnichannelRoom(); - const { quickActions, actionDefault } = useQuickActions(); - - return ( - - {quickActions.map(({ id, color, icon, title, action = actionDefault, options }, index) => { - const props = { - id, - icon, - color, - title: t(title), - className, - index, - primary: false, - action, - room, - }; - - if (options) { - return ; - } - - return ; - })} - {quickActions.length > 0 && } - - ); -}; - -export default memo(QuickActions); diff --git a/apps/meteor/client/views/room/HeaderV2/Omnichannel/QuickActions/hooks/usePutChatOnHoldMutation.ts b/apps/meteor/client/views/room/HeaderV2/Omnichannel/QuickActions/hooks/usePutChatOnHoldMutation.ts deleted file mode 100644 index 4cfbbe0aed77..000000000000 --- a/apps/meteor/client/views/room/HeaderV2/Omnichannel/QuickActions/hooks/usePutChatOnHoldMutation.ts +++ /dev/null @@ -1,29 +0,0 @@ -import type { IRoom } from '@rocket.chat/core-typings'; -import { useEndpoint } from '@rocket.chat/ui-contexts'; -import type { UseMutationOptions, UseMutationResult } from '@tanstack/react-query'; -import { useMutation, useQueryClient } from '@tanstack/react-query'; - -import { subscriptionsQueryKeys } from '../../../../../../lib/queryKeys'; - -export const usePutChatOnHoldMutation = ( - options?: Omit, 'mutationFn'>, -): UseMutationResult => { - const putChatOnHold = useEndpoint('POST', '/v1/livechat/room.onHold'); - - const queryClient = useQueryClient(); - - return useMutation( - async (rid) => { - await putChatOnHold({ roomId: rid }); - }, - { - ...options, - onSuccess: async (data, rid, context) => { - await queryClient.invalidateQueries(['current-chats']); - await queryClient.invalidateQueries(['rooms', rid]); - await queryClient.invalidateQueries(subscriptionsQueryKeys.subscription(rid)); - return options?.onSuccess?.(data, rid, context); - }, - }, - ); -}; diff --git a/apps/meteor/client/views/room/HeaderV2/Omnichannel/QuickActions/hooks/useQuickActions.tsx b/apps/meteor/client/views/room/HeaderV2/Omnichannel/QuickActions/hooks/useQuickActions.tsx deleted file mode 100644 index 9fb85a581ace..000000000000 --- a/apps/meteor/client/views/room/HeaderV2/Omnichannel/QuickActions/hooks/useQuickActions.tsx +++ /dev/null @@ -1,360 +0,0 @@ -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; -import { - useSetModal, - useToastMessageDispatch, - useUserId, - useSetting, - usePermission, - useRole, - useEndpoint, - useMethod, - useTranslation, - useRouter, -} from '@rocket.chat/ui-contexts'; -import React, { useCallback, useState, useEffect } from 'react'; - -import { usePutChatOnHoldMutation } from './usePutChatOnHoldMutation'; -import { useReturnChatToQueueMutation } from './useReturnChatToQueueMutation'; -import { LivechatInquiry } from '../../../../../../../app/livechat/client/collections/LivechatInquiry'; -import PlaceChatOnHoldModal from '../../../../../../../app/livechat-enterprise/client/components/modals/PlaceChatOnHoldModal'; -import { LegacyRoomManager } from '../../../../../../../app/ui-utils/client'; -import CloseChatModal from '../../../../../../components/Omnichannel/modals/CloseChatModal'; -import CloseChatModalData from '../../../../../../components/Omnichannel/modals/CloseChatModalData'; -import ForwardChatModal from '../../../../../../components/Omnichannel/modals/ForwardChatModal'; -import ReturnChatQueueModal from '../../../../../../components/Omnichannel/modals/ReturnChatQueueModal'; -import TranscriptModal from '../../../../../../components/Omnichannel/modals/TranscriptModal'; -import { useIsRoomOverMacLimit } from '../../../../../../hooks/omnichannel/useIsRoomOverMacLimit'; -import { useOmnichannelRouteConfig } from '../../../../../../hooks/omnichannel/useOmnichannelRouteConfig'; -import { useHasLicenseModule } from '../../../../../../hooks/useHasLicenseModule'; -import { quickActionHooks } from '../../../../../../ui'; -import { useOmnichannelRoom } from '../../../../contexts/RoomContext'; -import type { QuickActionsActionConfig } from '../../../../lib/quickActions'; -import { QuickActionsEnum } from '../../../../lib/quickActions'; - -export const useQuickActions = (): { - quickActions: QuickActionsActionConfig[]; - actionDefault: (actionId: string) => void; -} => { - const room = useOmnichannelRoom(); - const setModal = useSetModal(); - const router = useRouter(); - - const t = useTranslation(); - const dispatchToastMessage = useToastMessageDispatch(); - - const [onHoldModalActive, setOnHoldModalActive] = useState(false); - - const visitorRoomId = room.v._id; - const rid = room._id; - const uid = useUserId(); - const roomLastMessage = room.lastMessage; - - const getVisitorInfo = useEndpoint('GET', '/v1/livechat/visitors.info'); - - const getVisitorEmail = useMutableCallback(async () => { - if (!visitorRoomId) { - return; - } - - const { - visitor: { visitorEmails }, - } = await getVisitorInfo({ visitorId: visitorRoomId }); - - if (visitorEmails?.length && visitorEmails[0].address) { - return visitorEmails[0].address; - } - }); - - useEffect(() => { - if (onHoldModalActive && roomLastMessage?.token) { - setModal(null); - } - }, [roomLastMessage, onHoldModalActive, setModal]); - - const closeModal = useCallback(() => setModal(null), [setModal]); - - const requestTranscript = useEndpoint('POST', '/v1/livechat/transcript/:rid', { rid }); - - const handleRequestTranscript = useCallback( - async (email: string, subject: string) => { - try { - await requestTranscript({ email, subject }); - closeModal(); - dispatchToastMessage({ - type: 'success', - message: t('Livechat_email_transcript_has_been_requested'), - }); - } catch (error) { - dispatchToastMessage({ type: 'error', message: error }); - } - }, - [closeModal, dispatchToastMessage, requestTranscript, t], - ); - - const sendTranscriptPDF = useEndpoint('POST', '/v1/omnichannel/:rid/request-transcript', { rid }); - - const handleSendTranscriptPDF = useCallback(async () => { - try { - await sendTranscriptPDF(); - dispatchToastMessage({ - type: 'success', - message: t('Livechat_transcript_has_been_requested'), - }); - } catch (error) { - dispatchToastMessage({ type: 'error', message: error }); - } - }, [dispatchToastMessage, sendTranscriptPDF, t]); - - const sendTranscript = useMethod('livechat:sendTranscript'); - - const handleSendTranscript = useCallback( - async (email: string, subject: string, token: string) => { - try { - await sendTranscript(token, rid, email, subject); - closeModal(); - } catch (error) { - dispatchToastMessage({ type: 'error', message: error }); - } - }, - [closeModal, dispatchToastMessage, rid, sendTranscript], - ); - - const discardTranscript = useEndpoint('DELETE', '/v1/livechat/transcript/:rid', { rid }); - - const handleDiscardTranscript = useCallback(async () => { - try { - await discardTranscript(); - dispatchToastMessage({ - type: 'success', - message: t('Livechat_transcript_request_has_been_canceled'), - }); - closeModal(); - } catch (error) { - dispatchToastMessage({ type: 'error', message: error }); - } - }, [closeModal, discardTranscript, dispatchToastMessage, t]); - - const forwardChat = useEndpoint('POST', '/v1/livechat/room.forward'); - - const handleForwardChat = useCallback( - async (departmentId?: string, userId?: string, comment?: string) => { - if (departmentId && userId) { - return; - } - const transferData: { - roomId: string; - clientAction: boolean; - comment?: string; - departmentId?: string; - userId?: string; - } = { - roomId: rid, - comment, - clientAction: true, - }; - - if (departmentId) { - transferData.departmentId = departmentId; - } - if (userId) { - transferData.userId = userId; - } - - try { - await forwardChat(transferData); - dispatchToastMessage({ type: 'success', message: t('Transferred') }); - router.navigate('/home'); - LegacyRoomManager.close(room.t + rid); - closeModal(); - } catch (error) { - dispatchToastMessage({ type: 'error', message: error }); - } - }, - [closeModal, dispatchToastMessage, forwardChat, room.t, rid, router, t], - ); - - const closeChat = useEndpoint('POST', '/v1/livechat/room.closeByUser'); - - const handleClose = useCallback( - async ( - comment?: string, - tags?: string[], - preferences?: { omnichannelTranscriptPDF: boolean; omnichannelTranscriptEmail: boolean }, - requestData?: { email: string; subject: string }, - ) => { - try { - await closeChat({ - rid, - ...(comment && { comment }), - ...(tags && { tags }), - ...(preferences?.omnichannelTranscriptPDF && { generateTranscriptPdf: true }), - ...(preferences?.omnichannelTranscriptEmail && requestData - ? { - transcriptEmail: { - sendToVisitor: preferences?.omnichannelTranscriptEmail, - requestData, - }, - } - : { transcriptEmail: { sendToVisitor: false } }), - }); - LivechatInquiry.remove({ rid }); - closeModal(); - dispatchToastMessage({ type: 'success', message: t('Chat_closed_successfully') }); - } catch (error) { - dispatchToastMessage({ type: 'error', message: error }); - } - }, - [closeChat, closeModal, dispatchToastMessage, rid, t], - ); - - const returnChatToQueueMutation = useReturnChatToQueueMutation({ - onSuccess: () => { - LegacyRoomManager.close(room.t + rid); - router.navigate('/home'); - }, - onError: (error) => { - dispatchToastMessage({ type: 'error', message: error }); - }, - onSettled: () => { - closeModal(); - }, - }); - - const putChatOnHoldMutation = usePutChatOnHoldMutation({ - onSuccess: () => { - dispatchToastMessage({ type: 'success', message: t('Chat_On_Hold_Successfully') }); - }, - onError: (error) => { - dispatchToastMessage({ type: 'error', message: error }); - }, - onSettled: () => { - closeModal(); - }, - }); - - const handleAction = useMutableCallback(async (id: string) => { - switch (id) { - case QuickActionsEnum.MoveQueue: - setModal( - returnChatToQueueMutation.mutate(rid)} - onCancel={(): void => { - closeModal(); - }} - />, - ); - break; - case QuickActionsEnum.TranscriptPDF: - handleSendTranscriptPDF(); - break; - case QuickActionsEnum.TranscriptEmail: - const visitorEmail = await getVisitorEmail(); - - if (!visitorEmail) { - dispatchToastMessage({ type: 'error', message: t('Customer_without_registered_email') }); - break; - } - - setModal( - , - ); - break; - case QuickActionsEnum.ChatForward: - setModal(); - break; - case QuickActionsEnum.CloseChat: - const email = await getVisitorEmail(); - setModal( - room.departmentId ? ( - - ) : ( - - ), - ); - break; - case QuickActionsEnum.OnHoldChat: - setModal( - putChatOnHoldMutation.mutate(rid)} - onCancel={(): void => { - closeModal(); - setOnHoldModalActive(false); - }} - />, - ); - setOnHoldModalActive(true); - break; - default: - break; - } - }); - - const omnichannelRouteConfig = useOmnichannelRouteConfig(); - - const manualOnHoldAllowed = useSetting('Livechat_allow_manual_on_hold'); - - const hasManagerRole = useRole('livechat-manager'); - const hasMonitorRole = useRole('livechat-monitor'); - - const roomOpen = room?.open && (room.u?._id === uid || hasManagerRole || hasMonitorRole) && room?.lastMessage?.t !== 'livechat-close'; - const canMoveQueue = !!omnichannelRouteConfig?.returnQueue && room?.u !== undefined; - const canForwardGuest = usePermission('transfer-livechat-guest'); - const canSendTranscriptEmail = usePermission('send-omnichannel-chat-transcript'); - const hasLicense = useHasLicenseModule('livechat-enterprise'); - const canSendTranscriptPDF = usePermission('request-pdf-transcript'); - const canCloseRoom = usePermission('close-livechat-room'); - const canCloseOthersRoom = usePermission('close-others-livechat-room'); - const restrictedOnHold = useSetting('Livechat_allow_manual_on_hold_upon_agent_engagement_only'); - const canRoomBePlacedOnHold = !room.onHold && room.u; - const canAgentPlaceOnHold = !room.lastMessage?.token; - const canPlaceChatOnHold = Boolean(manualOnHoldAllowed && canRoomBePlacedOnHold && (!restrictedOnHold || canAgentPlaceOnHold)); - const isRoomOverMacLimit = useIsRoomOverMacLimit(room); - - const hasPermissionButtons = (id: string): boolean => { - switch (id) { - case QuickActionsEnum.MoveQueue: - return !isRoomOverMacLimit && !!roomOpen && canMoveQueue; - case QuickActionsEnum.ChatForward: - return !isRoomOverMacLimit && !!roomOpen && canForwardGuest; - case QuickActionsEnum.Transcript: - return !isRoomOverMacLimit && (canSendTranscriptEmail || (hasLicense && canSendTranscriptPDF)); - case QuickActionsEnum.TranscriptEmail: - return !isRoomOverMacLimit && canSendTranscriptEmail; - case QuickActionsEnum.TranscriptPDF: - return hasLicense && !isRoomOverMacLimit && canSendTranscriptPDF; - case QuickActionsEnum.CloseChat: - return !!roomOpen && (canCloseRoom || canCloseOthersRoom); - case QuickActionsEnum.OnHoldChat: - return !!roomOpen && canPlaceChatOnHold; - default: - break; - } - return false; - }; - - const quickActions = quickActionHooks - .map((quickActionHook) => quickActionHook()) - .filter((quickAction): quickAction is QuickActionsActionConfig => !!quickAction) - .filter((action) => { - const { options, id } = action; - if (options) { - action.options = options.filter(({ id }) => hasPermissionButtons(id)); - } - - return hasPermissionButtons(id); - }) - .sort((a, b) => (a.order ?? 0) - (b.order ?? 0)); - - const actionDefault = useMutableCallback((actionId: string) => { - handleAction(actionId); - }); - - return { quickActions, actionDefault }; -}; diff --git a/apps/meteor/client/views/room/HeaderV2/Omnichannel/QuickActions/hooks/useReturnChatToQueueMutation.ts b/apps/meteor/client/views/room/HeaderV2/Omnichannel/QuickActions/hooks/useReturnChatToQueueMutation.ts deleted file mode 100644 index c44afc8a2d08..000000000000 --- a/apps/meteor/client/views/room/HeaderV2/Omnichannel/QuickActions/hooks/useReturnChatToQueueMutation.ts +++ /dev/null @@ -1,30 +0,0 @@ -import type { IRoom } from '@rocket.chat/core-typings'; -import { useMethod } from '@rocket.chat/ui-contexts'; -import type { UseMutationOptions, UseMutationResult } from '@tanstack/react-query'; -import { useMutation, useQueryClient } from '@tanstack/react-query'; - -import { subscriptionsQueryKeys } from '../../../../../../lib/queryKeys'; - -export const useReturnChatToQueueMutation = ( - options?: Omit, 'mutationFn'>, -): UseMutationResult => { - const returnChatToQueue = useMethod('livechat:returnAsInquiry'); - - const queryClient = useQueryClient(); - - return useMutation( - async (rid) => { - await returnChatToQueue(rid); - }, - { - ...options, - onSuccess: async (data, rid, context) => { - await queryClient.invalidateQueries(['current-chats']); - queryClient.removeQueries(['rooms', rid]); - queryClient.removeQueries(['/v1/rooms.info', rid]); - queryClient.removeQueries(subscriptionsQueryKeys.subscription(rid)); - return options?.onSuccess?.(data, rid, context); - }, - }, - ); -}; diff --git a/apps/meteor/client/views/room/HeaderV2/Omnichannel/QuickActions/index.ts b/apps/meteor/client/views/room/HeaderV2/Omnichannel/QuickActions/index.ts deleted file mode 100644 index 5ec9f10150e3..000000000000 --- a/apps/meteor/client/views/room/HeaderV2/Omnichannel/QuickActions/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { lazy } from 'react'; - -export default lazy(() => import('./QuickActions')); diff --git a/apps/meteor/client/views/room/HeaderV2/Omnichannel/VoipRoomHeader.tsx b/apps/meteor/client/views/room/HeaderV2/Omnichannel/VoipRoomHeader.tsx deleted file mode 100644 index c79f8999f1a8..000000000000 --- a/apps/meteor/client/views/room/HeaderV2/Omnichannel/VoipRoomHeader.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import type { IVoipRoom } from '@rocket.chat/core-typings'; -import { useLayout, useRouter } from '@rocket.chat/ui-contexts'; -import React, { useCallback, useMemo } from 'react'; -import { useSyncExternalStore } from 'use-sync-external-store/shim'; - -import { HeaderToolbar } from '../../../../components/Header'; -import SidebarToggler from '../../../../components/SidebarToggler'; -import { parseOutboundPhoneNumber } from '../../../../lib/voip/parseOutboundPhoneNumber'; -import type { RoomHeaderProps } from '../RoomHeader'; -import RoomHeader from '../RoomHeader'; -import BackButton from './BackButton'; - -type VoipRoomHeaderProps = { - room: IVoipRoom; -} & Omit; - -const VoipRoomHeader = ({ slots: parentSlot, room }: VoipRoomHeaderProps) => { - const router = useRouter(); - - const currentRouteName = useSyncExternalStore( - router.subscribeToRouteChange, - useCallback(() => router.getRouteName(), [router]), - ); - - const { isMobile } = useLayout(); - - const slots = useMemo( - () => ({ - ...parentSlot, - start: (!!isMobile || currentRouteName === 'omnichannel-directory') && ( - - {isMobile && } - {currentRouteName === 'omnichannel-directory' && } - - ), - }), - [isMobile, currentRouteName, parentSlot], - ); - return ; -}; - -export default VoipRoomHeader; diff --git a/apps/meteor/client/views/room/HeaderV2/ParentRoom.tsx b/apps/meteor/client/views/room/HeaderV2/ParentRoom.tsx deleted file mode 100644 index 0c53d790caf8..000000000000 --- a/apps/meteor/client/views/room/HeaderV2/ParentRoom.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import type { IRoom } from '@rocket.chat/core-typings'; -import React from 'react'; - -import { HeaderTag, HeaderTagIcon } from '../../../components/Header'; -import { useRoomIcon } from '../../../hooks/useRoomIcon'; -import { roomCoordinator } from '../../../lib/rooms/roomCoordinator'; - -type ParentRoomProps = { - room: Pick; -}; - -const ParentRoom = ({ room }: ParentRoomProps) => { - const icon = useRoomIcon(room); - - const handleRedirect = (): void => roomCoordinator.openRouteLink(room.t, { rid: room._id, ...room }); - - return ( - (e.code === 'Space' || e.code === 'Enter') && handleRedirect()} - onClick={handleRedirect} - > - - {roomCoordinator.getRoomName(room.t, room)} - - ); -}; - -export default ParentRoom; diff --git a/apps/meteor/client/views/room/HeaderV2/ParentRoomWithData.tsx b/apps/meteor/client/views/room/HeaderV2/ParentRoomWithData.tsx deleted file mode 100644 index aed3adc53b39..000000000000 --- a/apps/meteor/client/views/room/HeaderV2/ParentRoomWithData.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import type { IRoom } from '@rocket.chat/core-typings'; -import { useUserSubscription } from '@rocket.chat/ui-contexts'; -import React from 'react'; - -import ParentRoom from './ParentRoom'; -import ParentRoomWithEndpointData from './ParentRoomWithEndpointData'; - -type ParentRoomWithDataProps = { - room: IRoom; -}; - -const ParentRoomWithData = ({ room }: ParentRoomWithDataProps) => { - const { prid } = room; - - if (!prid) { - throw new Error('Parent room ID is missing'); - } - - const subscription = useUserSubscription(prid); - - if (subscription) { - return ; - } - - return ; -}; - -export default ParentRoomWithData; diff --git a/apps/meteor/client/views/room/HeaderV2/ParentRoomWithEndpointData.tsx b/apps/meteor/client/views/room/HeaderV2/ParentRoomWithEndpointData.tsx deleted file mode 100644 index 08888fc243a4..000000000000 --- a/apps/meteor/client/views/room/HeaderV2/ParentRoomWithEndpointData.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import type { IRoom } from '@rocket.chat/core-typings'; -import React from 'react'; - -import ParentRoom from './ParentRoom'; -import { HeaderTagSkeleton } from '../../../components/Header'; -import { useRoomInfoEndpoint } from '../../../hooks/useRoomInfoEndpoint'; - -type ParentRoomWithEndpointDataProps = { - rid: IRoom['_id']; -}; - -const ParentRoomWithEndpointData = ({ rid }: ParentRoomWithEndpointDataProps) => { - const { data, isLoading, isError } = useRoomInfoEndpoint(rid); - - if (isLoading) { - return ; - } - - if (isError || !data?.room) { - return null; - } - - return ; -}; - -export default ParentRoomWithEndpointData; diff --git a/apps/meteor/client/views/room/HeaderV2/ParentTeam.tsx b/apps/meteor/client/views/room/HeaderV2/ParentTeam.tsx deleted file mode 100644 index 2f8bfa57c566..000000000000 --- a/apps/meteor/client/views/room/HeaderV2/ParentTeam.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import type { IRoom } from '@rocket.chat/core-typings'; -import { TEAM_TYPE } from '@rocket.chat/core-typings'; -import { useUserId, useEndpoint } from '@rocket.chat/ui-contexts'; -import { useQuery } from '@tanstack/react-query'; -import React from 'react'; - -import { HeaderTag, HeaderTagIcon, HeaderTagSkeleton } from '../../../components/Header'; -import { goToRoomById } from '../../../lib/utils/goToRoomById'; - -type APIErrorResult = { success: boolean; error: string }; - -type ParentTeamProps = { - room: IRoom; -}; - -const ParentTeam = ({ room }: ParentTeamProps) => { - const { teamId } = room; - const userId = useUserId(); - - if (!teamId) { - throw new Error('invalid rid'); - } - - if (!userId) { - throw new Error('invalid uid'); - } - - const teamsInfoEndpoint = useEndpoint('GET', '/v1/teams.info'); - const userTeamsListEndpoint = useEndpoint('GET', '/v1/users.listTeams'); - - const { - data: teamInfoData, - isLoading: teamInfoLoading, - isError: teamInfoError, - } = useQuery(['teamId', teamId], async () => teamsInfoEndpoint({ teamId }), { - keepPreviousData: true, - retry: (_, error) => (error as APIErrorResult)?.error === 'unauthorized' && false, - }); - - const { data: userTeams, isLoading: userTeamsLoading } = useQuery(['userId', userId], async () => userTeamsListEndpoint({ userId })); - - const userBelongsToTeam = userTeams?.teams?.find((team) => team._id === teamId) || false; - const isTeamPublic = teamInfoData?.teamInfo.type === TEAM_TYPE.PUBLIC; - - const redirectToMainRoom = (): void => { - const rid = teamInfoData?.teamInfo.roomId; - if (!rid) { - return; - } - - if (!(isTeamPublic || userBelongsToTeam)) { - return; - } - - goToRoomById(rid); - }; - - if (teamInfoLoading || userTeamsLoading) { - return ; - } - - if (teamInfoError) { - return null; - } - - return ( - (e.code === 'Space' || e.code === 'Enter') && redirectToMainRoom()} - onClick={redirectToMainRoom} - > - - {teamInfoData?.teamInfo.name} - - ); -}; - -export default ParentTeam; diff --git a/apps/meteor/client/views/room/HeaderV2/RoomHeader.tsx b/apps/meteor/client/views/room/HeaderV2/RoomHeader.tsx deleted file mode 100644 index 82d63485d026..000000000000 --- a/apps/meteor/client/views/room/HeaderV2/RoomHeader.tsx +++ /dev/null @@ -1,69 +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 React, { 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 { Header, HeaderAvatar, HeaderContent, HeaderContentRow, HeaderToolbar } from '../../../components/Header'; - -export type RoomHeaderProps = { - room: IRoom; - slots: { - start?: unknown; - preContent?: unknown; - insideContent?: unknown; - posContent?: unknown; - end?: unknown; - toolbox?: { - pre?: unknown; - content?: unknown; - pos?: unknown; - }; - }; - roomToolbox?: JSX.Element; -}; - -const RoomHeader = ({ room, slots = {}, roomToolbox }: RoomHeaderProps) => { - const { t } = useTranslation(); - - return ( -
- {slots?.start} - - - - {slots?.preContent} - - - - - {room.prid && } - {room.teamId && !room.teamMain && } - {isRoomFederated(room) && } - - - {slots?.insideContent} - - - {slots?.posContent} - - - {slots?.toolbox?.pre} - {slots?.toolbox?.content || roomToolbox || } - {slots?.toolbox?.pos} - - - {slots?.end} -
- ); -}; - -export default RoomHeader; diff --git a/apps/meteor/client/views/room/HeaderV2/RoomHeaderE2EESetup.tsx b/apps/meteor/client/views/room/HeaderV2/RoomHeaderE2EESetup.tsx deleted file mode 100644 index a40bf902469c..000000000000 --- a/apps/meteor/client/views/room/HeaderV2/RoomHeaderE2EESetup.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React, { lazy } from 'react'; - -import RoomHeader from './RoomHeader'; -import type { RoomHeaderProps } from './RoomHeader'; -import { E2EEState } from '../../../../app/e2e/client/E2EEState'; -import { E2ERoomState } from '../../../../app/e2e/client/E2ERoomState'; -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 === E2EEState.SAVE_PASSWORD || e2eeState === E2EEState.ENTER_PASSWORD || e2eRoomState === E2ERoomState.WAITING_KEYS) { - return } />; - } - - return ; -}; - -export default RoomHeaderE2EESetup; diff --git a/apps/meteor/client/views/room/HeaderV2/RoomTitle.tsx b/apps/meteor/client/views/room/HeaderV2/RoomTitle.tsx deleted file mode 100644 index 9b8011737636..000000000000 --- a/apps/meteor/client/views/room/HeaderV2/RoomTitle.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import { isTeamRoom, type IRoom } from '@rocket.chat/core-typings'; -import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; -import { useDocumentTitle } from '@rocket.chat/ui-client'; -import type { KeyboardEvent } from 'react'; -import React from 'react'; - -import HeaderIconWithRoom from './HeaderIconWithRoom'; -import { HeaderTitle, HeaderTitleButton } from '../../../components/Header'; -import { useRoomToolbox } from '../contexts/RoomToolboxContext'; - -type RoomTitleProps = { room: IRoom }; - -const RoomTitle = ({ room }: RoomTitleProps) => { - 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 'v': - openTab('voip-room-info'); - break; - - case 'd': - (room.uids?.length ?? 0) > 2 ? openTab('user-info-group') : openTab('user-info'); - break; - - default: - openTab('channel-settings'); - break; - } - }); - - return ( - (e.code === 'Enter' || e.code === 'Space') && handleOpenRoomInfo()} - onClick={() => handleOpenRoomInfo()} - tabIndex={0} - role='button' - > - - {room.name} - - ); -}; - -export default RoomTitle; diff --git a/apps/meteor/client/views/room/HeaderV2/RoomToolbox/RoomToolbox.tsx b/apps/meteor/client/views/room/HeaderV2/RoomToolbox/RoomToolbox.tsx deleted file mode 100644 index 5c0aeb430478..000000000000 --- a/apps/meteor/client/views/room/HeaderV2/RoomToolbox/RoomToolbox.tsx +++ /dev/null @@ -1,102 +0,0 @@ -import type { Box } from '@rocket.chat/fuselage'; -import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; -import { GenericMenu } from '@rocket.chat/ui-client'; -import type { GenericMenuItemProps } from '@rocket.chat/ui-client'; -import { useLayout } from '@rocket.chat/ui-contexts'; -import type { ComponentProps } from 'react'; -import React, { memo } from 'react'; -import { useTranslation } from 'react-i18next'; - -import { HeaderToolbarAction, HeaderToolbarDivider } from '../../../../components/Header'; -import { useRoomToolbox } from '../../contexts/RoomToolboxContext'; -import type { RoomToolboxActionConfig } from '../../contexts/RoomToolboxContext'; - -type RoomToolboxProps = { - className?: ComponentProps['className']; -}; - -type MenuActionsProps = { - id: string; - items: GenericMenuItemProps[]; -}[]; - -const RoomToolbox = ({ className }: RoomToolboxProps) => { - const { t } = useTranslation(); - const { roomToolboxExpanded } = useLayout(); - - const toolbox = useRoomToolbox(); - const { actions, openTab } = toolbox; - - const featuredActions = actions.filter((action) => action.featured); - const normalActions = actions.filter((action) => !action.featured); - const visibleActions = !roomToolboxExpanded ? [] : normalActions.slice(0, 6); - - const hiddenActions = (!roomToolboxExpanded ? actions : normalActions.slice(6)) - .filter((item) => !item.disabled && !item.featured) - .map((item) => ({ - 'key': item.id, - 'content': t(item.title), - 'onClick': - item.action ?? - ((): void => { - openTab(item.id); - }), - 'data-qa-id': `ToolBoxAction-${item.icon}`, - ...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, key: item.key, title: group === 'apps' ? t('Apps') : '', items: [item] }; - acc.push(newSection); - - return acc; - }, [] as MenuActionsProps); - - const renderDefaultToolboxItem: RoomToolboxActionConfig['renderToolboxItem'] = useEffectEvent( - ({ id, className, index, icon, title, toolbox: { tab }, action, disabled, tooltip }) => { - return ( - - ); - }, - ); - - const mapToToolboxItem = (action: RoomToolboxActionConfig, index: number) => { - return (action.renderToolboxItem ?? renderDefaultToolboxItem)?.({ - ...action, - action: action.action ?? (() => toolbox.openTab(action.id)), - className, - index, - toolbox, - }); - }; - - return ( - <> - {featuredActions.map(mapToToolboxItem)} - {featuredActions.length > 0 && } - {visibleActions.map(mapToToolboxItem)} - {(normalActions.length > 6 || !roomToolboxExpanded) && !!hiddenActions.length && ( - - )} - - ); -}; - -export default memo(RoomToolbox); diff --git a/apps/meteor/client/views/room/HeaderV2/RoomToolbox/RoomToolboxE2EESetup.tsx b/apps/meteor/client/views/room/HeaderV2/RoomToolbox/RoomToolboxE2EESetup.tsx deleted file mode 100644 index 12caba1f3801..000000000000 --- a/apps/meteor/client/views/room/HeaderV2/RoomToolbox/RoomToolboxE2EESetup.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { useStableArray } from '@rocket.chat/fuselage-hooks'; -import React from 'react'; -import { useTranslation } from 'react-i18next'; - -import { HeaderToolbarAction } from '../../../../components/Header'; -import { roomActionHooksForE2EESetup } from '../../../../ui'; -import type { RoomToolboxActionConfig } from '../../contexts/RoomToolboxContext'; -import { useRoomToolbox } from '../../contexts/RoomToolboxContext'; - -const RoomToolboxE2EESetup = () => { - const { t } = useTranslation(); - const toolbox = useRoomToolbox(); - - const { tab } = toolbox; - - const actions = useStableArray( - roomActionHooksForE2EESetup - .map((roomActionHook) => roomActionHook()) - .filter((roomAction): roomAction is RoomToolboxActionConfig => !!roomAction), - ); - - return ( - <> - {actions.map(({ id, icon, title, action, disabled, tooltip }, index) => ( - toolbox.openTab(id))} - disabled={disabled} - tooltip={tooltip} - /> - ))} - - ); -}; - -export default RoomToolboxE2EESetup; diff --git a/apps/meteor/client/views/room/HeaderV2/RoomToolbox/index.ts b/apps/meteor/client/views/room/HeaderV2/RoomToolbox/index.ts deleted file mode 100644 index d5a042756df4..000000000000 --- a/apps/meteor/client/views/room/HeaderV2/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/HeaderV2/icons/Encrypted.tsx b/apps/meteor/client/views/room/HeaderV2/icons/Encrypted.tsx deleted file mode 100644 index ca21153126fd..000000000000 --- a/apps/meteor/client/views/room/HeaderV2/icons/Encrypted.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import type { IRoom } from '@rocket.chat/core-typings'; -import colors from '@rocket.chat/fuselage-tokens/colors'; -import { useSetting } from '@rocket.chat/ui-contexts'; -import React, { memo } from 'react'; -import { useTranslation } from 'react-i18next'; - -import { HeaderState } from '../../../../components/Header'; - -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/HeaderV2/icons/Favorite.tsx b/apps/meteor/client/views/room/HeaderV2/icons/Favorite.tsx deleted file mode 100644 index bf58a748697b..000000000000 --- a/apps/meteor/client/views/room/HeaderV2/icons/Favorite.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import type { IRoom, ISubscription } from '@rocket.chat/core-typings'; -import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; -import { useSetting, useTranslation } from '@rocket.chat/ui-contexts'; -import React, { memo } from 'react'; - -import { HeaderState } from '../../../../components/Header'; -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/HeaderV2/icons/Translate.tsx b/apps/meteor/client/views/room/HeaderV2/icons/Translate.tsx deleted file mode 100644 index 993b844a4213..000000000000 --- a/apps/meteor/client/views/room/HeaderV2/icons/Translate.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import type { IRoom } from '@rocket.chat/core-typings'; -import { useSetting } from '@rocket.chat/ui-contexts'; -import React, { memo } from 'react'; -import { useTranslation } from 'react-i18next'; - -import { HeaderState } from '../../../../components/Header'; - -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/HeaderV2/index.ts b/apps/meteor/client/views/room/HeaderV2/index.ts deleted file mode 100644 index a38c9709c31b..000000000000 --- a/apps/meteor/client/views/room/HeaderV2/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as HeaderV2 } from './Header'; diff --git a/apps/meteor/client/views/room/Room.tsx b/apps/meteor/client/views/room/Room.tsx index b0001db4daab..90956b16b583 100644 --- a/apps/meteor/client/views/room/Room.tsx +++ b/apps/meteor/client/views/room/Room.tsx @@ -7,7 +7,7 @@ import { ErrorBoundary } from 'react-error-boundary'; import RoomE2EESetup from './E2EESetup/RoomE2EESetup'; import Header from './Header'; -import { HeaderV2 } from './HeaderV2'; +import { HeaderV2 } from './Header'; import MessageHighlightProvider from './MessageList/providers/MessageHighlightProvider'; import RoomBody from './body/RoomBody'; import RoomBodyV2 from './body/RoomBodyV2'; diff --git a/apps/meteor/client/views/room/RoomSkeleton.tsx b/apps/meteor/client/views/room/RoomSkeleton.tsx index b6c463417a92..ff220ad80b1a 100644 --- a/apps/meteor/client/views/room/RoomSkeleton.tsx +++ b/apps/meteor/client/views/room/RoomSkeleton.tsx @@ -3,7 +3,7 @@ import type { ReactElement } from 'react'; import React from 'react'; import HeaderSkeleton from './Header/HeaderSkeleton'; -import HeaderSkeletonV2 from './HeaderV2/HeaderSkeleton'; +import HeaderSkeletonV2 from './Header/HeaderSkeleton'; import RoomComposerSkeleton from './composer/RoomComposer/RoomComposerSkeleton'; import RoomLayout from './layout/RoomLayout'; import MessageListSkeleton from '../../components/message/list/MessageListSkeleton'; diff --git a/apps/meteor/client/views/room/body/RoomTopic.tsx b/apps/meteor/client/views/room/body/RoomTopic.tsx index fee06bd087d6..7c5706b06ba8 100644 --- a/apps/meteor/client/views/room/body/RoomTopic.tsx +++ b/apps/meteor/client/views/room/body/RoomTopic.tsx @@ -9,7 +9,7 @@ import { RoomRoles } from '../../../../app/models/client'; import MarkdownText from '../../../components/MarkdownText'; import { usePresence } from '../../../hooks/usePresence'; import { useReactiveQuery } from '../../../hooks/useReactiveQuery'; -import RoomLeader from '../HeaderV2/RoomLeader'; +import RoomLeader from '../Header/RoomLeader'; import { useCanEditRoom } from '../contextualBar/Info/hooks/useCanEditRoom'; type RoomTopicProps = { diff --git a/apps/meteor/client/views/room/layout/RoomLayout.tsx b/apps/meteor/client/views/room/layout/RoomLayout.tsx index 3c0c4c313c99..8e88e6a34481 100644 --- a/apps/meteor/client/views/room/layout/RoomLayout.tsx +++ b/apps/meteor/client/views/room/layout/RoomLayout.tsx @@ -9,7 +9,7 @@ import React, { Suspense, useMemo } from 'react'; import { ContextualbarDialog } from '../../../components/Contextualbar'; import HeaderSkeleton from '../Header/HeaderSkeleton'; -import HeaderSkeletonV2 from '../HeaderV2/HeaderSkeleton'; +import HeaderSkeletonV2 from '../Header/HeaderSkeleton'; type RoomLayoutProps = { header?: ReactNode; From 69ad15880f5584a87a362a198016a502ee74ee4d Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Mon, 2 Dec 2024 13:35:26 -0300 Subject: [PATCH 04/24] chore: adjust imports --- .../client/views/home/cards/CreateChannelsCard.tsx | 4 ++-- apps/meteor/client/views/room/Header/index.ts | 2 +- apps/meteor/client/views/room/Room.tsx | 14 +------------- apps/meteor/client/views/room/RoomSkeleton.tsx | 13 +------------ .../channels/TeamsChannelsWithData.tsx | 4 ++-- 5 files changed, 7 insertions(+), 30 deletions(-) diff --git a/apps/meteor/client/views/home/cards/CreateChannelsCard.tsx b/apps/meteor/client/views/home/cards/CreateChannelsCard.tsx index a0edf15ba3ac..37efd7031eb1 100644 --- a/apps/meteor/client/views/home/cards/CreateChannelsCard.tsx +++ b/apps/meteor/client/views/home/cards/CreateChannelsCard.tsx @@ -4,13 +4,13 @@ import type { ComponentProps, ReactElement } from 'react'; import React from 'react'; import { GenericCard, GenericCardButton } from '../../../components/GenericCard'; -import CreateChannelWithData from '../../../sidebar/header/CreateChannel'; +import CreateChannelModal from '../../../sidebar/header/CreateChannelModal'; const CreateChannelsCard = (props: Omit, 'type'>): ReactElement => { const t = useTranslation(); const setModal = useSetModal(); - const openCreateChannelModal = (): void => setModal( setModal(null)} />); + const openCreateChannelModal = (): void => setModal( setModal(null)} />); return ( { ? t('Conversation_with__roomName__', { roomName: room.name }) : t('Channel__roomName__', { roomName: room.name }) } - header={ - <> - - - - - -
- - - - } + header={
} body={ shouldDisplayE2EESetup ? ( diff --git a/apps/meteor/client/views/room/RoomSkeleton.tsx b/apps/meteor/client/views/room/RoomSkeleton.tsx index ff220ad80b1a..8a324fafdd7f 100644 --- a/apps/meteor/client/views/room/RoomSkeleton.tsx +++ b/apps/meteor/client/views/room/RoomSkeleton.tsx @@ -1,25 +1,14 @@ -import { FeaturePreview, FeaturePreviewOff, FeaturePreviewOn } from '@rocket.chat/ui-client'; import type { ReactElement } from 'react'; import React from 'react'; import HeaderSkeleton from './Header/HeaderSkeleton'; -import HeaderSkeletonV2 from './Header/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/teams/contextualBar/channels/TeamsChannelsWithData.tsx b/apps/meteor/client/views/teams/contextualBar/channels/TeamsChannelsWithData.tsx index 11f10674aa8f..4485584603e0 100644 --- a/apps/meteor/client/views/teams/contextualBar/channels/TeamsChannelsWithData.tsx +++ b/apps/meteor/client/views/teams/contextualBar/channels/TeamsChannelsWithData.tsx @@ -9,7 +9,7 @@ import { useTeamsChannelList } from './hooks/useTeamsChannelList'; import { useRecordList } from '../../../../hooks/lists/useRecordList'; import { AsyncStatePhase } from '../../../../lib/asyncState'; import { roomCoordinator } from '../../../../lib/rooms/roomCoordinator'; -import CreateChannelWithData from '../../../../sidebar/header/CreateChannel'; +import CreateChannelModal from '../../../../sidebar/header/CreateChannelModal'; import { useRoom } from '../../../room/contexts/RoomContext'; import { useRoomToolbox } from '../../../room/contexts/RoomToolboxContext'; @@ -45,7 +45,7 @@ const TeamsChannelsWithData = () => { }); const handleCreateNew = useEffectEvent(() => { - setModal( setModal(null)} reload={reload} />); + setModal( setModal(null)} reload={reload} />); }); const goToRoom = useEffectEvent((room: IRoom) => { From a1a835d1764dd0961c9f6305712ea3d7ea90b701 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Mon, 2 Dec 2024 14:31:06 -0300 Subject: [PATCH 05/24] feat: delete `RoomBody` and `LayoutWithSidebar` and rename v2 --- .../views/room/E2EESetup/RoomE2EESetup.tsx | 13 +- apps/meteor/client/views/room/Room.tsx | 19 +- .../client/views/room/body/RoomBody.tsx | 82 ++--- .../client/views/room/body/RoomBodyV2.tsx | 300 ------------------ .../client/views/room/layout/RoomLayout.tsx | 17 +- .../root/MainLayout/LayoutWithSidebar.tsx | 41 +-- .../root/MainLayout/LayoutWithSidebarV2.tsx | 67 ---- .../MainLayout/TwoFactorAuthSetupCheck.tsx | 13 +- 8 files changed, 54 insertions(+), 498 deletions(-) delete mode 100644 apps/meteor/client/views/room/body/RoomBodyV2.tsx delete mode 100644 apps/meteor/client/views/root/MainLayout/LayoutWithSidebarV2.tsx diff --git a/apps/meteor/client/views/room/E2EESetup/RoomE2EESetup.tsx b/apps/meteor/client/views/room/E2EESetup/RoomE2EESetup.tsx index 88ef05fd7e56..8927f3d499b6 100644 --- a/apps/meteor/client/views/room/E2EESetup/RoomE2EESetup.tsx +++ b/apps/meteor/client/views/room/E2EESetup/RoomE2EESetup.tsx @@ -1,4 +1,3 @@ -import { FeaturePreview, FeaturePreviewOff, FeaturePreviewOn } from '@rocket.chat/ui-client'; import { Accounts } from 'meteor/accounts-base'; import React, { useCallback } from 'react'; import { useTranslation } from 'react-i18next'; @@ -8,7 +7,6 @@ import { e2e } from '../../../../app/e2e/client'; import { E2EEState } from '../../../../app/e2e/client/E2EEState'; import { E2ERoomState } from '../../../../app/e2e/client/E2ERoomState'; import RoomBody from '../body/RoomBody'; -import RoomBodyV2 from '../body/RoomBodyV2'; import { useRoom } from '../contexts/RoomContext'; import { useE2EERoomState } from '../hooks/useE2EERoomState'; import { useE2EEState } from '../hooks/useE2EEState'; @@ -66,16 +64,7 @@ const RoomE2EESetup = () => { ); } - return ( - - - - - - - - - ); + return ; }; export default RoomE2EESetup; diff --git a/apps/meteor/client/views/room/Room.tsx b/apps/meteor/client/views/room/Room.tsx index c9113e52f82c..4e4a63d46c1d 100644 --- a/apps/meteor/client/views/room/Room.tsx +++ b/apps/meteor/client/views/room/Room.tsx @@ -1,4 +1,3 @@ -import { FeaturePreview, FeaturePreviewOff, FeaturePreviewOn } from '@rocket.chat/ui-client'; import { useTranslation, useSetting } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React, { createElement, lazy, memo, Suspense } from 'react'; @@ -9,7 +8,6 @@ import RoomE2EESetup from './E2EESetup/RoomE2EESetup'; import Header from './Header'; import MessageHighlightProvider from './MessageList/providers/MessageHighlightProvider'; import RoomBody from './body/RoomBody'; -import RoomBodyV2 from './body/RoomBodyV2'; import { useRoom } from './contexts/RoomContext'; import { useRoomToolbox } from './contexts/RoomToolboxContext'; import { useAppsContextualBar } from './hooks/useAppsContextualBar'; @@ -43,22 +41,7 @@ const Room = (): ReactElement => { : t('Channel__roomName__', { roomName: room.name }) } header={
} - body={ - shouldDisplayE2EESetup ? ( - - ) : ( - <> - - - - - - - - - - ) - } + body={shouldDisplayE2EESetup ? : } aside={ (toolbox.tab?.tabComponent && ( diff --git a/apps/meteor/client/views/room/body/RoomBody.tsx b/apps/meteor/client/views/room/body/RoomBody.tsx index 13c111592c39..3f1ecb0fd2bc 100644 --- a/apps/meteor/client/views/room/body/RoomBody.tsx +++ b/apps/meteor/client/views/room/body/RoomBody.tsx @@ -1,41 +1,38 @@ -import type { IUser } from '@rocket.chat/core-typings'; +import { css } from '@rocket.chat/css-in-js'; import { Box } from '@rocket.chat/fuselage'; import { useMergedRefs } from '@rocket.chat/fuselage-hooks'; import { usePermission, useRole, useSetting, useTranslation, useUser, useUserPreference } from '@rocket.chat/ui-contexts'; -import type { MouseEventHandler, ReactElement, UIEvent } from 'react'; +import type { MouseEventHandler, ReactElement } from 'react'; import React, { memo, useCallback, useMemo, useRef } from 'react'; -import DropTargetOverlay from './DropTargetOverlay'; -import JumpToRecentMessageButton from './JumpToRecentMessageButton'; -import LeaderBar from './LeaderBar'; -import { RoomRoles } from '../../../../app/models/client'; import { isTruthy } from '../../../../lib/isTruthy'; import { CustomScrollbars } from '../../../components/CustomScrollbars'; import { useEmbeddedLayout } from '../../../hooks/useEmbeddedLayout'; -import { useReactiveQuery } from '../../../hooks/useReactiveQuery'; -import Announcement from '../Announcement'; import { BubbleDate } from '../BubbleDate'; import { MessageList } from '../MessageList'; +import DropTargetOverlay from './DropTargetOverlay'; +import JumpToRecentMessageButton from './JumpToRecentMessageButton'; +import MessageListErrorBoundary from '../MessageList/MessageListErrorBoundary'; +import RoomAnnouncement from '../RoomAnnouncement'; import LoadingMessagesIndicator from './LoadingMessagesIndicator'; import RetentionPolicyWarning from './RetentionPolicyWarning'; -import MessageListErrorBoundary from '../MessageList/MessageListErrorBoundary'; import ComposerContainer from '../composer/ComposerContainer'; import RoomComposer from '../composer/RoomComposer/RoomComposer'; import { useChat } from '../contexts/ChatContext'; import { useRoom, useRoomSubscription, useRoomMessages } from '../contexts/RoomContext'; import { useRoomToolbox } from '../contexts/RoomToolboxContext'; -import { useUserCard } from '../contexts/UserCardContext'; import { useDateScroll } from '../hooks/useDateScroll'; import { useMessageListNavigation } from '../hooks/useMessageListNavigation'; import { useRetentionPolicy } from '../hooks/useRetentionPolicy'; import RoomForeword from './RoomForeword/RoomForeword'; +import { RoomTopic } from './RoomTopic'; import UnreadMessagesIndicator from './UnreadMessagesIndicator'; import UploadProgressIndicator from './UploadProgressIndicator'; +import { useBannerSection } from './hooks/useBannerSection'; import { useFileUpload } from './hooks/useFileUpload'; import { useGetMore } from './hooks/useGetMore'; import { useGoToHomeOnRemoved } from './hooks/useGoToHomeOnRemoved'; import { useHasNewMessages } from './hooks/useHasNewMessages'; -import { useLeaderBanner } from './hooks/useLeaderBanner'; import { useListIsAtBottom } from './hooks/useListIsAtBottom'; import { useQuoteMessageByUrl } from './hooks/useQuoteMessageByUrl'; import { useReadMessageWindowEvents } from './hooks/useReadMessageWindowEvents'; @@ -86,8 +83,6 @@ const RoomBody = (): ReactElement => { return subscribed; }, [allowAnonymousRead, canPreviewChannelRoom, room, subscribed]); - const useRealName = useSetting('UI_Use_Real_Name', false); - const innerBoxRef = useRef(null); const { @@ -104,7 +99,7 @@ const RoomBody = (): ReactElement => { const { innerRef: getMoreInnerRef } = useGetMore(room._id, atBottomRef); - const { wrapperRef: leaderBannerWrapperRef, hideLeaderHeader, innerRef: leaderBannerInnerRef } = useLeaderBanner(); + const { wrapperRef: sectionWrapperRef, hideSection, innerRef: sectionScrollRef } = useBannerSection(); const { uploads, @@ -130,14 +125,14 @@ const RoomBody = (): ReactElement => { restoreScrollPositionInnerRef, isAtBottomInnerRef, newMessagesScrollRef, - leaderBannerInnerRef, + sectionScrollRef, unreadBarInnerRef, getMoreInnerRef, messageListRef, ); - const wrapperBoxRefs = useMergedRefs(unreadBarWrapperRef, leaderBannerWrapperRef); + const wrapperBoxRefs = useMergedRefs(unreadBarWrapperRef); const handleNavigateToPreviousMessage = useCallback((): void => { chat.messageEditing.toPreviousMessage(); @@ -179,43 +174,30 @@ const RoomBody = (): ReactElement => { [toolbox], ); - const { openUserCard, triggerProps } = useUserCard(); - - const handleOpenUserCard = useCallback( - (event: UIEvent, username: IUser['username']) => { - if (!username) { - return; - } - - openUserCard(event, username); - }, - [openUserCard], - ); - useGoToHomeOnRemoved(room, user?._id); useReadMessageWindowEvents(); useQuoteMessageByUrl(); - const { data: roomLeader } = useReactiveQuery(['rooms', room._id, 'leader', { not: user?._id }], () => { - const leaderRoomRole = RoomRoles.findOne({ - 'rid': room._id, - 'roles': 'leader', - 'u._id': { $ne: user?._id }, - }); + const wrapperStyle = css` + position: absolute; + width: 100%; + z-index: 5; + top: 0px; - if (!leaderRoomRole) { - return null; + &.animated-hidden { + top: -88px; } - - return { - ...leaderRoomRole.u, - name: useRealName ? leaderRoomRole.u.name || leaderRoomRole.u.username : leaderRoomRole.u.username, - }; - }); + `; return ( <> - {!isLayoutEmbedded && room.announcement && } + + + + {!isLayoutEmbedded && room.announcement && } + + +
{
- {roomLeader ? ( - - ) : null}
{uploads.map((upload) => ( { -
+
{ - 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 innerBoxRef = useRef(null); - - 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 } = useListIsAtBottom(); - - const { innerRef: getMoreInnerRef } = useGetMore(room._id, atBottomRef); - - const { wrapperRef: sectionWrapperRef, hideSection, innerRef: sectionScrollRef } = useBannerSection(); - - const { - uploads, - handleUploadFiles, - handleUploadProgressClose, - targeDrop: [fileUploadTriggerProps, fileUploadOverlayProps], - } = useFileUpload(); - - const { innerRef: restoreScrollPositionInnerRef } = useRestoreScrollPosition(room._id); - - const { messageListRef } = useMessageListNavigation(); - - const { handleNewMessageButtonClick, handleJumpToRecentButtonClick, handleComposerResize, hasNewMessages, newMessagesScrollRef } = - useHasNewMessages(room._id, user?._id, atBottomRef, { - sendToBottom, - sendToBottomIfNecessary, - isAtBottom, - }); - - const innerRef = useMergedRefs( - dateScrollInnerRef, - innerBoxRef, - restoreScrollPositionInnerRef, - isAtBottomInnerRef, - newMessagesScrollRef, - sectionScrollRef, - unreadBarInnerRef, - getMoreInnerRef, - - messageListRef, - ); - - const wrapperBoxRefs = useMergedRefs(unreadBarWrapperRef); - - const handleNavigateToPreviousMessage = useCallback((): void => { - chat.messageEditing.toPreviousMessage(); - }, [chat.messageEditing]); - - const handleNavigateToNextMessage = useCallback((): void => { - chat.messageEditing.toNextMessage(); - }, [chat.messageEditing]); - - const handleCloseFlexTab: MouseEventHandler = useCallback( - (e): 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(); - - const wrapperStyle = css` - position: absolute; - width: 100%; - z-index: 5; - top: 0px; - - &.animated-hidden { - top: -88px; - } - `; - - return ( - <> - - - - {!isLayoutEmbedded && room.announcement && } - - - - - - - - ); -}; - -export default memo(RoomBody); diff --git a/apps/meteor/client/views/room/layout/RoomLayout.tsx b/apps/meteor/client/views/room/layout/RoomLayout.tsx index 8e88e6a34481..b235340703fb 100644 --- a/apps/meteor/client/views/room/layout/RoomLayout.tsx +++ b/apps/meteor/client/views/room/layout/RoomLayout.tsx @@ -2,14 +2,12 @@ import { Box } from '@rocket.chat/fuselage'; import { useResizeObserver } from '@rocket.chat/fuselage-hooks'; import breakpointsDefinitions from '@rocket.chat/fuselage-tokens/breakpoints.json'; -import { FeaturePreview, FeaturePreviewOff, FeaturePreviewOn } from '@rocket.chat/ui-client'; import { LayoutContext, useLayout } from '@rocket.chat/ui-contexts'; import type { ComponentProps, ReactElement, ReactNode } from 'react'; import React, { Suspense, useMemo } from 'react'; import { ContextualbarDialog } from '../../../components/Contextualbar'; import HeaderSkeleton from '../Header/HeaderSkeleton'; -import HeaderSkeletonV2 from '../Header/HeaderSkeleton'; type RoomLayoutProps = { header?: ReactNode; @@ -60,20 +58,7 @@ const RoomLayout = ({ header, body, footer, aside, ...props }: RoomLayoutProps): )} > - - - - - - - - - } - > - {header} - + }>{header} diff --git a/apps/meteor/client/views/root/MainLayout/LayoutWithSidebar.tsx b/apps/meteor/client/views/root/MainLayout/LayoutWithSidebar.tsx index 9bcc489d5f8f..9b849dde6dd1 100644 --- a/apps/meteor/client/views/root/MainLayout/LayoutWithSidebar.tsx +++ b/apps/meteor/client/views/root/MainLayout/LayoutWithSidebar.tsx @@ -1,10 +1,12 @@ import { Box } from '@rocket.chat/fuselage'; -import { useLayout, useSetting, useCurrentModal, useRoute, useCurrentRoutePath } from '@rocket.chat/ui-contexts'; +import type { IRouterPaths } from '@rocket.chat/ui-contexts'; +import { useLayout, useSetting, useCurrentModal, useCurrentRoutePath, useRouter } from '@rocket.chat/ui-contexts'; import type { ReactElement, ReactNode } from 'react'; import React, { useEffect, useRef } from 'react'; import AccessibilityShortcut from './AccessibilityShortcut'; import { MainLayoutStyleTags } from './MainLayoutStyleTags'; +import NavBar from '../../../navbar'; import Sidebar from '../../../sidebar'; const LayoutWithSidebar = ({ children }: { children: ReactNode }): ReactElement => { @@ -12,7 +14,7 @@ const LayoutWithSidebar = ({ children }: { children: ReactNode }): ReactElement const modal = useCurrentModal(); const currentRoutePath = useCurrentRoutePath(); - const channelRoute = useRoute('channel'); + const router = useRouter(); const removeSidenav = embeddedLayout && !currentRoutePath?.startsWith('/admin'); const readReceiptsEnabled = useSetting('Message_Read_Receipt_Store_Users'); @@ -36,26 +38,29 @@ const LayoutWithSidebar = ({ children }: { children: ReactNode }): ReactElement } redirected.current = true; - channelRoute.push({ name: firstChannelAfterLogin }); - }, [channelRoute, currentRoutePath, firstChannelAfterLogin]); + router.navigate({ name: `/channel/${firstChannelAfterLogin}` as keyof IRouterPaths }); + }, [router, currentRoutePath, firstChannelAfterLogin]); return ( - + <> - - {!removeSidenav && } -
+ - {children} -
- + + {!removeSidenav && } +
+ {children} +
+ + ); }; diff --git a/apps/meteor/client/views/root/MainLayout/LayoutWithSidebarV2.tsx b/apps/meteor/client/views/root/MainLayout/LayoutWithSidebarV2.tsx deleted file mode 100644 index 198de6279292..000000000000 --- a/apps/meteor/client/views/root/MainLayout/LayoutWithSidebarV2.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import { Box } from '@rocket.chat/fuselage'; -import type { IRouterPaths } from '@rocket.chat/ui-contexts'; -import { useLayout, useSetting, useCurrentModal, useCurrentRoutePath, useRouter } from '@rocket.chat/ui-contexts'; -import type { ReactElement, ReactNode } from 'react'; -import React, { useEffect, useRef } from 'react'; - -import AccessibilityShortcut from './AccessibilityShortcut'; -import { MainLayoutStyleTags } from './MainLayoutStyleTags'; -import NavBar from '../../../navbar'; -import Sidebar from '../../../sidebar'; - -const LayoutWithSidebarV2 = ({ children }: { children: ReactNode }): ReactElement => { - const { isEmbedded: embeddedLayout } = useLayout(); - - const modal = useCurrentModal(); - const currentRoutePath = useCurrentRoutePath(); - const router = useRouter(); - const removeSidenav = embeddedLayout && !currentRoutePath?.startsWith('/admin'); - const readReceiptsEnabled = useSetting('Message_Read_Receipt_Store_Users'); - - const firstChannelAfterLogin = useSetting('First_Channel_After_Login'); - - const redirected = useRef(false); - - useEffect(() => { - const needToBeRedirect = currentRoutePath && ['/', '/home'].includes(currentRoutePath); - - if (!needToBeRedirect) { - return; - } - - if (!firstChannelAfterLogin || typeof firstChannelAfterLogin !== 'string') { - return; - } - - if (redirected.current) { - return; - } - redirected.current = true; - - router.navigate({ name: `/channel/${firstChannelAfterLogin}` as keyof IRouterPaths }); - }, [router, currentRoutePath, firstChannelAfterLogin]); - - return ( - <> - - - - - {!removeSidenav && } -
- {children} -
- - - ); -}; - -export default LayoutWithSidebarV2; diff --git a/apps/meteor/client/views/root/MainLayout/TwoFactorAuthSetupCheck.tsx b/apps/meteor/client/views/root/MainLayout/TwoFactorAuthSetupCheck.tsx index 8c3dbf91bda3..bdeb49e21ec7 100644 --- a/apps/meteor/client/views/root/MainLayout/TwoFactorAuthSetupCheck.tsx +++ b/apps/meteor/client/views/root/MainLayout/TwoFactorAuthSetupCheck.tsx @@ -1,10 +1,8 @@ -import { FeaturePreview, FeaturePreviewOff, FeaturePreviewOn } from '@rocket.chat/ui-client'; import { useLayout, useUser, useSetting } from '@rocket.chat/ui-contexts'; import type { ReactElement, ReactNode } from 'react'; import React, { lazy, useCallback } from 'react'; import LayoutWithSidebar from './LayoutWithSidebar'; -import LayoutWithSidebarV2 from './LayoutWithSidebarV2'; import { Roles } from '../../../../app/models/client'; import { useReactiveValue } from '../../../hooks/useReactiveValue'; @@ -36,16 +34,7 @@ const TwoFactorAuthSetupCheck = ({ children }: { children: ReactNode }): ReactEl ); } - return ( - - - {children} - - - {children} - - - ); + return {children}; }; export default TwoFactorAuthSetupCheck; From f487bfb90d3b82626ee82de36b487d6397194398 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Mon, 2 Dec 2024 15:05:07 -0300 Subject: [PATCH 06/24] chore: adjust imports --- .../client/sidebar/RoomList/RoomListRow.tsx | 2 +- apps/meteor/client/sidebar/search/Row.tsx | 2 +- .../room/Sidepanel/hooks/useItemData.tsx | 2 +- .../client/views/room/body/LeaderBar.tsx | 82 ------------------- 4 files changed, 3 insertions(+), 85 deletions(-) delete mode 100644 apps/meteor/client/views/room/body/LeaderBar.tsx diff --git a/apps/meteor/client/sidebar/RoomList/RoomListRow.tsx b/apps/meteor/client/sidebar/RoomList/RoomListRow.tsx index 473fad9b0e42..5644e351525f 100644 --- a/apps/meteor/client/sidebar/RoomList/RoomListRow.tsx +++ b/apps/meteor/client/sidebar/RoomList/RoomListRow.tsx @@ -2,7 +2,7 @@ import type { IRoom, ISubscription } from '@rocket.chat/core-typings'; import type { TFunction } from 'i18next'; import React, { memo, useMemo } from 'react'; -import SidebarItemTemplateWithData from './SidebarItemTemplateWithData'; +import SidebarItemTemplateWithData from './SideBarItemTemplateWithData'; import { useVideoConfAcceptCall, useVideoConfRejectIncomingCall, useVideoConfIncomingCalls } from '../../contexts/VideoConfContext'; import type { useAvatarTemplate } from '../hooks/useAvatarTemplate'; import type { useTemplateByViewMode } from '../hooks/useTemplateByViewMode'; diff --git a/apps/meteor/client/sidebar/search/Row.tsx b/apps/meteor/client/sidebar/search/Row.tsx index c0d332c5fa7e..d983b2833479 100644 --- a/apps/meteor/client/sidebar/search/Row.tsx +++ b/apps/meteor/client/sidebar/search/Row.tsx @@ -3,7 +3,7 @@ import type { ReactElement } from 'react'; import React, { memo } from 'react'; import UserItem from './UserItem'; -import SidebarItemTemplateWithData from '../RoomList/SidebarItemTemplateWithData'; +import SidebarItemTemplateWithData from '../RoomList/SideBarItemTemplateWithData'; type RowProps = { item: ISubscription & IRoom; diff --git a/apps/meteor/client/views/room/Sidepanel/hooks/useItemData.tsx b/apps/meteor/client/views/room/Sidepanel/hooks/useItemData.tsx index 73929ef6c9ca..ea6edf9dd6f5 100644 --- a/apps/meteor/client/views/room/Sidepanel/hooks/useItemData.tsx +++ b/apps/meteor/client/views/room/Sidepanel/hooks/useItemData.tsx @@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'; import { RoomIcon } from '../../../../components/RoomIcon'; import { roomCoordinator } from '../../../../lib/rooms/roomCoordinator'; -import { getMessage } from '../../../../sidebar/RoomList/SidebarItemTemplateWithData'; +import { getMessage } from '../../../../sidebar/RoomList/SideBarItemTemplateWithData'; import { useAvatarTemplate } from '../../../../sidebar/hooks/useAvatarTemplate'; import { useUnreadDisplay } from '../../../../sidebar/hooks/useUnreadDisplay'; diff --git a/apps/meteor/client/views/room/body/LeaderBar.tsx b/apps/meteor/client/views/room/body/LeaderBar.tsx deleted file mode 100644 index 6c637eb84d8e..000000000000 --- a/apps/meteor/client/views/room/body/LeaderBar.tsx +++ /dev/null @@ -1,82 +0,0 @@ -import type { IUser } from '@rocket.chat/core-typings'; -import { css } from '@rocket.chat/css-in-js'; -import { Box, Button } from '@rocket.chat/fuselage'; -import { UserAvatar } from '@rocket.chat/ui-avatar'; -import type { ReactElement, UIEvent } from 'react'; -import React, { memo, useCallback, useMemo } from 'react'; -import type { AriaButtonProps } from 'react-aria'; -import { useTranslation } from 'react-i18next'; - -import { isTruthy } from '../../../../lib/isTruthy'; -import { ReactiveUserStatus } from '../../../components/UserStatus'; -import { roomCoordinator } from '../../../lib/rooms/roomCoordinator'; - -type LeaderBarProps = { - _id: IUser['_id']; - name: IUser['name']; - username: IUser['username']; - visible: boolean; - onAvatarClick?: (event: UIEvent, username: IUser['username']) => void; - triggerProps: AriaButtonProps<'button'>; -}; -/** - * @deprecated on newNavigation feature. Remove after full migration. - */ -const LeaderBar = ({ _id, name, username, visible, onAvatarClick, triggerProps }: LeaderBarProps): ReactElement => { - const { t } = useTranslation(); - - const chatNowLink = useMemo(() => roomCoordinator.getRouteLink('d', { name: username }) || undefined, [username]); - - const handleAvatarClick = useCallback( - (event: UIEvent) => { - onAvatarClick?.(event, username); - }, - [onAvatarClick, username], - ); - - if (!username) { - throw new Error('username is required'); - } - - const roomLeaderStyle = css` - position: relative; - z-index: 9; - right: 0; - left: 0; - display: flex; - - &.animated-hidden { - display: none !important; - } - `; - - return ( - - - - - - - - - {name} - - - - - - ); -}; - -export default memo(LeaderBar); From 9e7f029780b945e62356735b8fbcdde2ce3257c6 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Mon, 2 Dec 2024 15:30:39 -0300 Subject: [PATCH 07/24] fix: add missing global declaration --- apps/meteor/client/sidebar/header/SearchSection.tsx | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/apps/meteor/client/sidebar/header/SearchSection.tsx b/apps/meteor/client/sidebar/header/SearchSection.tsx index e8a85ca0bb55..aea38851505f 100644 --- a/apps/meteor/client/sidebar/header/SearchSection.tsx +++ b/apps/meteor/client/sidebar/header/SearchSection.tsx @@ -24,6 +24,19 @@ const wrapperStyle = css` background-color: ${Palette.surface['surface-sidebar']}; `; +declare global { + // eslint-disable-next-line @typescript-eslint/naming-convention + interface Window { + opera?: string; + } + // eslint-disable-next-line @typescript-eslint/naming-convention + interface Navigator { + userAgentData?: { + mobile: boolean; + }; + } +} + const mobileCheck = function () { let check = false; (function (a: string) { From b0516e23f989b46796017f561c273c302ab32203 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Wed, 4 Dec 2024 12:48:16 -0300 Subject: [PATCH 08/24] test: deprecate `home-sidenav` fragments. moved and refactored to `sidebar`, `navbar` and `create-room-modal` --- .../fragments/create-room-modal.ts | 56 +++++++++++ .../page-objects/fragments/home-sidenav.ts | 94 +++++++++++++++++++ .../tests/e2e/page-objects/fragments/index.ts | 1 + .../e2e/page-objects/fragments/navbar.ts | 60 +++++++++++- .../e2e/page-objects/fragments/sidebar.ts | 63 +++++++++++-- 5 files changed, 264 insertions(+), 10 deletions(-) create mode 100644 apps/meteor/tests/e2e/page-objects/fragments/create-room-modal.ts diff --git a/apps/meteor/tests/e2e/page-objects/fragments/create-room-modal.ts b/apps/meteor/tests/e2e/page-objects/fragments/create-room-modal.ts new file mode 100644 index 000000000000..07a14395a1c5 --- /dev/null +++ b/apps/meteor/tests/e2e/page-objects/fragments/create-room-modal.ts @@ -0,0 +1,56 @@ +import type { Locator, Page } from '@playwright/test'; + +export class CreateRoomModal { + private readonly page: Page; + + constructor(page: Page) { + this.page = page; + } + + get modalRoot(): Locator { + return this.page.locator('#modal-root'); + } + + getModalByRoomType(roomType: 'channel' | 'team' | 'direct message' | 'discussion'): Locator { + if (roomType === 'channel' || roomType === 'team') { + return this.modalRoot.getByRole('dialog', { name: `Create ${roomType}`, exact: true }); + } + if (roomType === 'direct message') { + return this.modalRoot.getByRole('dialog', { name: `New ${roomType}`, exact: true }); + } + // TODO: Add discussion form id labelledby + return this.modalRoot.getByRole('dialog'); + } + + get inputChannelName(): Locator { + return this.getModalByRoomType('channel').getByRole('textbox', { name: 'Name' }); + } + + get inputDirectUsernames(): Locator { + return this.getModalByRoomType('direct message').getByRole('textbox'); + } + + get advancedSettingsAccordion(): Locator { + return this.modalRoot.getByRole('dialog').getByRole('button', { name: 'Advanced settings', exact: true }); + } + + getCheckboxByLabel(label: string): Locator { + return this.modalRoot.locator('label', { has: this.page.getByRole('checkbox', { name: label }) }); + } + + get checkboxPrivate(): Locator { + return this.getCheckboxByLabel('Private'); + } + + get checkboxEncryption(): Locator { + return this.getCheckboxByLabel('Encrypted'); + } + + get checkboxReadOnly(): Locator { + return this.getCheckboxByLabel('Read-only'); + } + + get btnCreate(): Locator { + return this.modalRoot.getByRole('button', { name: 'Create' }); + } +} diff --git a/apps/meteor/tests/e2e/page-objects/fragments/home-sidenav.ts b/apps/meteor/tests/e2e/page-objects/fragments/home-sidenav.ts index 46f806104420..a6f5a42fb5b8 100644 --- a/apps/meteor/tests/e2e/page-objects/fragments/home-sidenav.ts +++ b/apps/meteor/tests/e2e/page-objects/fragments/home-sidenav.ts @@ -9,50 +9,84 @@ export class HomeSidenav { this.page = page; } + /** + * @deprecated Use new-room-modal fragment + */ get advancedSettingsAccordion(): Locator { return this.page.getByRole('dialog').getByRole('button', { name: 'Advanced settings', exact: true }); } + /** + * @deprecated Use new-room-modal fragment + */ get checkboxPrivateChannel(): Locator { return this.page.locator('label', { has: this.page.getByRole('checkbox', { name: 'Private' }) }); } + /** + * @deprecated Use new-room-modal fragment + */ get checkboxEncryption(): Locator { return this.page.locator('role=dialog[name="Create channel"] >> label >> text="Encrypted"'); } + /** + * @deprecated Use new-room-modal fragment + */ get checkboxReadOnly(): Locator { return this.page.locator('label', { has: this.page.getByRole('checkbox', { name: 'Read-only' }) }); } + /** + * @deprecated Use new-room-modal fragment + */ get inputChannelName(): Locator { return this.page.locator('#modal-root [data-qa="create-channel-modal"] [data-qa-type="channel-name-input"]'); } + /** + * @deprecated Use new-room-modal fragment + */ get inputDirectUsername(): Locator { return this.page.locator('#modal-root [data-qa="create-direct-modal"] [data-qa-type="user-auto-complete-input"]'); } + /** + * @deprecated Use new-room-modal fragment + */ get btnCreate(): Locator { return this.page.locator('role=button[name="Create"]'); } + /** + * @deprecated Use sidebar fragment + */ get inputSearch(): Locator { return this.page.locator('[placeholder="Search (Ctrl+K)"]').first(); } + /** + * @deprecated Use navbar fragment + */ get userProfileMenu(): Locator { return this.page.getByRole('button', { name: 'User menu', exact: true }); } + /** + * @deprecated Use sidebar fragment + */ get sidebarChannelsList(): Locator { return this.page.getByRole('list', { name: 'Channels' }); } + // TODO: deprecate get sidebarToolbar(): Locator { return this.page.getByRole('toolbar', { name: 'Sidebar actions' }); } + /** + * @deprecated Use sidebar fragment + */ async setDisplayMode(mode: 'Extended' | 'Medium' | 'Condensed'): Promise { await this.sidebarToolbar.getByRole('button', { name: 'Display', exact: true }).click(); await this.sidebarToolbar.getByRole('menuitemcheckbox', { name: mode }).click(); @@ -60,21 +94,33 @@ export class HomeSidenav { } // Note: this is different from openChat because queued chats are not searchable + /** + * @deprecated Use sidebar fragment + */ getQueuedChat(name: string): Locator { return this.page.locator('[data-qa="sidebar-item-title"]', { hasText: new RegExp(`^${name}$`) }).first(); } + /** + * @deprecated Use navbar fragment + */ get accountProfileOption(): Locator { return this.page.locator('role=menuitemcheckbox[name="Profile"]'); } // TODO: refactor getSidebarItemByName to not use data-qa + /** + * @deprecated Use sidebar fragment + */ getSidebarItemByName(name: string, isRead?: boolean): Locator { return this.page.locator( ['[data-qa="sidebar-item"]', `[aria-label="${name}"]`, isRead && '[data-unread="false"]'].filter(Boolean).join(''), ); } + /** + * @deprecated Use sidebar fragment: markItemAsUnread + */ async selectMarkAsUnread(name: string) { const sidebarItem = this.getSidebarItemByName(name); await sidebarItem.focus(); @@ -82,6 +128,9 @@ export class HomeSidenav { await this.page.getByRole('option', { name: 'Mark Unread' }).click(); } + /** + * @deprecated Use sidebar fragment + */ async selectPriority(name: string, priority: string) { const sidebarItem = this.getSidebarItemByName(name); await sidebarItem.focus(); @@ -89,50 +138,80 @@ export class HomeSidenav { await this.page.locator(`li[value="${priority}"]`).click(); } + /** + * @deprecated Use navbar fragment: openWorkspaceSettings + */ async openAdministrationByLabel(text: string): Promise { await this.page.locator('role=button[name="Administration"]').click(); await this.page.locator(`role=menuitem[name="${text}"]`).click(); } + /** + * @deprecated Use navbar fragment + */ async openInstalledApps(): Promise { await this.page.locator('role=button[name="Administration"]').click(); await this.page.locator('//div[contains(text(),"Installed")]').click(); } + /** + * @deprecated Use sidebar fragment: openCreateNewByLabel + */ async openNewByLabel(text: string): Promise { await this.page.locator('role=button[name="Create new"]').click(); await this.page.locator(`role=menuitem[name="${text}"]`).click(); } + /** + * @deprecated Use sidebar fragment: typeSearch + */ async openSearch(): Promise { await this.page.locator('role=navigation >> role=button[name=Search]').click(); } + /** + * @deprecated Use sidebar fragment + */ getSearchRoomByName(name: string): Locator { return this.page.locator(`role=search >> role=listbox >> role=link >> text="${name}"`); } + /** + * @deprecated Use sidebar fragment: typeSearch + */ async searchRoom(name: string): Promise { await this.openSearch(); await this.page.locator('role=search >> role=searchbox').fill(name); } + /** + * @deprecated Use navbar fragment + */ async logout(): Promise { await this.userProfileMenu.click(); await this.page.locator('//*[contains(@class, "rcx-option__content") and contains(text(), "Logout")]').click(); } + /** + * @deprecated Use navbar fragment + */ async switchStatus(status: 'offline' | 'online'): Promise { await this.userProfileMenu.click(); await this.page.locator(`role=menuitemcheckbox[name="${status}"]`).click(); } + /** + * @deprecated Use sidebar fragment + */ async openChat(name: string): Promise { await this.searchRoom(name); await this.getSearchRoomByName(name).click(); await this.waitForChannel(); } + /** + * @deprecated Use sidebar fragment + */ async waitForChannel(): Promise { await this.page.locator('role=main').waitFor(); await this.page.locator('role=main >> role=heading[level=1]').waitFor(); @@ -141,6 +220,9 @@ export class HomeSidenav { await expect(this.page.locator('role=main >> role=list')).not.toHaveAttribute('aria-busy', 'true'); } + /** + * @deprecated Use navbar fragment + */ async switchOmnichannelStatus(status: 'offline' | 'online') { // button has a id of "omnichannel-status-toggle" const toggleButton = this.page.locator('#omnichannel-status-toggle'); @@ -166,6 +248,9 @@ export class HomeSidenav { expect(newStatus).toBe(status === 'offline' ? StatusTitleMap.offline : StatusTitleMap.online); } + /** + * @deprecated Use sidebar fragment + */ async createPublicChannel(name: string) { await this.openNewByLabel('Channel'); await this.checkboxPrivateChannel.click(); @@ -173,6 +258,9 @@ export class HomeSidenav { await this.btnCreate.click(); } + /** + * @deprecated Use navbar fragment + */ async createEncryptedChannel(name: string) { await this.openNewByLabel('Channel'); await this.inputChannelName.fill(name); @@ -181,10 +269,16 @@ export class HomeSidenav { await this.btnCreate.click(); } + /** + * @deprecated Use sidebar fragment: getItemUnreadBadge + */ getRoomBadge(roomName: string): Locator { return this.getSidebarItemByName(roomName).getByRole('status', { exact: true }); } + /** + * @deprecated Use sidebar fragment: getItemUnreadBadge + */ getSearchChannelBadge(name: string): Locator { return this.page.locator(`[data-qa="sidebar-item"][aria-label="${name}"]`).first().getByRole('status', { exact: true }); } diff --git a/apps/meteor/tests/e2e/page-objects/fragments/index.ts b/apps/meteor/tests/e2e/page-objects/fragments/index.ts index fc5ab5e62385..d9d50536555e 100644 --- a/apps/meteor/tests/e2e/page-objects/fragments/index.ts +++ b/apps/meteor/tests/e2e/page-objects/fragments/index.ts @@ -6,3 +6,4 @@ export * from './omnichannel-sidenav'; export * from './omnichannel-close-chat-modal'; export * from './navbar'; export * from './sidebar'; +export * from './create-room-modal'; diff --git a/apps/meteor/tests/e2e/page-objects/fragments/navbar.ts b/apps/meteor/tests/e2e/page-objects/fragments/navbar.ts index 55cda22ed09e..d81bf761a73f 100644 --- a/apps/meteor/tests/e2e/page-objects/fragments/navbar.ts +++ b/apps/meteor/tests/e2e/page-objects/fragments/navbar.ts @@ -15,7 +15,65 @@ export class Navbar { return this.navbar.getByRole('toolbar', { name: 'Pages' }); } + get omnichannelToolbar(): Locator { + return this.navbar.getByRole('toolbar', { name: 'Omnichannel', exact: true }); + } + get homeButton(): Locator { - return this.pagesToolbar.getByRole('button', { name: 'Home' }); + return this.pagesToolbar.getByRole('button', { name: 'Home', exact: true }); + } + + async openInstalledApps(): Promise { + await this.pagesToolbar.getByRole('button', { name: 'Marketplace', exact: true }).click(); + await this.pagesToolbar.getByRole('menu').getByRole('menuitem', { name: 'Installed', exact: true }).click(); + } + + get settingsGroup(): Locator { + return this.navbar.getByRole('group', { name: 'Workspace and user settings', exact: true }); + } + + get userProfileMenu(): Locator { + return this.settingsGroup.getByRole('button', { name: 'User menu', exact: true }); + } + + get accountProfileOption(): Locator { + return this.settingsGroup.getByRole('menuitemcheckbox', { name: 'Profile', exact: true }); + } + + async openWorkspaceSettings(): Promise { + await this.settingsGroup.getByRole('button', { name: 'Workspace', exact: true }).click(); + } + + async switchStatus(status: 'offline' | 'online'): Promise { + await this.userProfileMenu.click(); + await this.settingsGroup.getByRole('menu').getByRole('menuitemcheckbox', { name: status, exact: true }).click(); + } + + async switchOmnichannelStatus(status: 'offline' | 'online'): Promise { + const toggleButton = this.omnichannelToolbar.getByRole('button', { name: 'answer chats' }); + expect(toggleButton).toBeVisible(); + + enum StatusTitleMap { + offline = 'Turn on answer chats', + online = 'Turn off answer chats', + } + + const currentStatus = await toggleButton.getAttribute('title'); + if (status === 'offline') { + if (currentStatus === StatusTitleMap.online) { + await toggleButton.click(); + } + } else if (currentStatus === StatusTitleMap.offline) { + await toggleButton.click(); + } + await this.page.waitForTimeout(500); + + const newStatus = await this.omnichannelToolbar.getByRole('button', { name: 'answer chats' }).getAttribute('title'); + expect(newStatus).toBe(status === 'offline' ? StatusTitleMap.offline : StatusTitleMap.online); + } + + async logout(): Promise { + await this.userProfileMenu.click(); + await this.settingsGroup.getByRole('menu').getByRole('menuitemcheckbox', { name: 'Locoug', exact: true }).click(); } } diff --git a/apps/meteor/tests/e2e/page-objects/fragments/sidebar.ts b/apps/meteor/tests/e2e/page-objects/fragments/sidebar.ts index 5e5488c127f8..4ce14ae60339 100644 --- a/apps/meteor/tests/e2e/page-objects/fragments/sidebar.ts +++ b/apps/meteor/tests/e2e/page-objects/fragments/sidebar.ts @@ -1,12 +1,16 @@ import type { Locator, Page } from '@playwright/test'; +import { CreateRoomModal } from './create-room-modal'; import { expect } from '../../utils/test'; export class Sidebar { private readonly page: Page; + readonly newRoomModal: CreateRoomModal; + constructor(page: Page) { this.page = page; + this.newRoomModal = new CreateRoomModal(page); } // New navigation locators @@ -14,20 +18,20 @@ export class Sidebar { return this.page.getByRole('navigation', { name: 'sidebar' }); } - get sidebarSearchSection(): Locator { - return this.sidebar.getByRole('search'); - } - get btnRecent(): Locator { - return this.sidebarSearchSection.getByRole('button', { name: 'Recent' }); + return this.searchSection.getByRole('button', { name: 'Recent' }); } get channelsList(): Locator { return this.sidebar.getByRole('list', { name: 'Channels' }); } + get searchSection(): Locator { + return this.sidebar.getByRole('search'); + } + get searchList(): Locator { - return this.sidebar.getByRole('search').getByRole('list', { name: 'Channels' }); + return this.searchSection.getByRole('list', { name: 'Channels' }); } get firstCollapser(): Locator { @@ -39,7 +43,7 @@ export class Sidebar { } get searchInput(): Locator { - return this.sidebarSearchSection.getByRole('searchbox'); + return this.searchSection.getByRole('searchbox'); } async escSearch(): Promise { @@ -62,19 +66,32 @@ export class Sidebar { return this.searchList.getByRole('link', { name }); } + getSidebarItemByName(name: string): Locator { + return this.channelsList.getByRole('link', { name }); + } + async openChat(name: string): Promise { await this.typeSearch(name); await this.getSearchRoomByName(name).click(); - await this.waitForChannel(); } - async markItemAsUnread(item: Locator): Promise { + async openItemMenu(item: Locator): Promise { await item.hover(); await item.focus(); await item.locator('.rcx-sidebar-item__menu').click(); + } + + async markItemAsUnread(item: Locator): Promise { + await this.openItemMenu(item); await this.page.getByRole('option', { name: 'Mark Unread' }).click(); } + async selectPriority(name: string, priority: string) { + const item = this.getSidebarItemByName(name); + await this.openItemMenu(item); + await this.page.getByRole('option', { name: priority }).click(); + } + getCollapseGroupByName(name: string): Locator { return this.channelsList.getByRole('button').filter({ has: this.page.getByRole('heading', { name, exact: true }) }); } @@ -82,4 +99,32 @@ export class Sidebar { getItemUnreadBadge(item: Locator): Locator { return item.getByRole('status', { name: 'unread' }); } + + // Note: this is different from openChat because queued chats are not searchable + getQueuedChat(name: string): Locator { + return this.page.locator('[data-qa="sidebar-item-title"]', { hasText: new RegExp(`^${name}$`) }).first(); + } + + async openCreateNewByLabel(name: 'Direct message' | 'Discussion' | 'Channel' | 'Team'): Promise { + await this.searchSection.getByRole('button', { name: 'Create new', exact: true }).click(); + await this.page.getByRole('menuitem', { name }).click(); + } + + async setDisplayMode(mode: 'Extended' | 'Medium' | 'Condensed'): Promise { + await this.searchSection.getByRole('button', { name: 'Display', exact: true }).click(); + await this.sidebar.getByRole('menuitemcheckbox', { name: mode }).click(); + await this.searchSection.click(); + } + + async createEncryptedChannel(name: string) { + await this.openCreateNewByLabel('Channel'); + await this.newRoomModal.inputChannelName.fill(name); + } + + async createPublicChannel(name: string) { + await this.openCreateNewByLabel('Channel'); + await this.newRoomModal.checkboxPrivate.click(); + await this.newRoomModal.inputChannelName.fill(name); + await this.newRoomModal.btnCreate.click(); + } } From 3bc43096165b4cfdcb26e33c813867ba1cd4fbd9 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Wed, 4 Dec 2024 12:50:11 -0300 Subject: [PATCH 09/24] test: add new fragments to page-objects --- .../tests/e2e/page-objects/fragments/sidebar.ts | 12 ++++++------ apps/meteor/tests/e2e/page-objects/home-channel.ts | 5 ++++- .../meteor/tests/e2e/page-objects/home-discussion.ts | 11 ++++++++++- .../tests/e2e/page-objects/home-omnichannel.ts | 8 +++++++- apps/meteor/tests/e2e/page-objects/home-team.ts | 11 ++++++++++- 5 files changed, 37 insertions(+), 10 deletions(-) diff --git a/apps/meteor/tests/e2e/page-objects/fragments/sidebar.ts b/apps/meteor/tests/e2e/page-objects/fragments/sidebar.ts index 4ce14ae60339..dda449cca8f1 100644 --- a/apps/meteor/tests/e2e/page-objects/fragments/sidebar.ts +++ b/apps/meteor/tests/e2e/page-objects/fragments/sidebar.ts @@ -6,11 +6,11 @@ import { expect } from '../../utils/test'; export class Sidebar { private readonly page: Page; - readonly newRoomModal: CreateRoomModal; + readonly createRoomModal: CreateRoomModal; constructor(page: Page) { this.page = page; - this.newRoomModal = new CreateRoomModal(page); + this.createRoomModal = new CreateRoomModal(page); } // New navigation locators @@ -118,13 +118,13 @@ export class Sidebar { async createEncryptedChannel(name: string) { await this.openCreateNewByLabel('Channel'); - await this.newRoomModal.inputChannelName.fill(name); + await this.createRoomModal.inputChannelName.fill(name); } async createPublicChannel(name: string) { await this.openCreateNewByLabel('Channel'); - await this.newRoomModal.checkboxPrivate.click(); - await this.newRoomModal.inputChannelName.fill(name); - await this.newRoomModal.btnCreate.click(); + await this.createRoomModal.checkboxPrivate.click(); + await this.createRoomModal.inputChannelName.fill(name); + await this.createRoomModal.btnCreate.click(); } } diff --git a/apps/meteor/tests/e2e/page-objects/home-channel.ts b/apps/meteor/tests/e2e/page-objects/home-channel.ts index 76929b6c2dcf..9ec89b36cfeb 100644 --- a/apps/meteor/tests/e2e/page-objects/home-channel.ts +++ b/apps/meteor/tests/e2e/page-objects/home-channel.ts @@ -1,6 +1,6 @@ import type { Locator, Page } from '@playwright/test'; -import { HomeContent, HomeSidenav, HomeFlextab, Navbar, Sidebar } from './fragments'; +import { HomeContent, HomeSidenav, HomeFlextab, Navbar, Sidebar, CreateRoomModal } from './fragments'; export class HomeChannel { public readonly page: Page; @@ -15,6 +15,8 @@ export class HomeChannel { readonly tabs: HomeFlextab; + readonly createRoomModal: CreateRoomModal; + constructor(page: Page) { this.page = page; this.content = new HomeContent(page); @@ -22,6 +24,7 @@ export class HomeChannel { this.sidebar = new Sidebar(page); this.navbar = new Navbar(page); this.tabs = new HomeFlextab(page); + this.createRoomModal = new CreateRoomModal(page); } get toastSuccess(): Locator { diff --git a/apps/meteor/tests/e2e/page-objects/home-discussion.ts b/apps/meteor/tests/e2e/page-objects/home-discussion.ts index 58e129d745a1..17d541f2bd11 100644 --- a/apps/meteor/tests/e2e/page-objects/home-discussion.ts +++ b/apps/meteor/tests/e2e/page-objects/home-discussion.ts @@ -1,6 +1,6 @@ import type { Locator, Page } from '@playwright/test'; -import { HomeContent, HomeSidenav, HomeFlextab } from './fragments'; +import { HomeContent, HomeSidenav, HomeFlextab, Navbar, Sidebar, CreateRoomModal } from './fragments'; export class HomeDiscussion { private readonly page: Page; @@ -9,13 +9,22 @@ export class HomeDiscussion { readonly sidenav: HomeSidenav; + readonly sidebar: Sidebar; + + readonly navbar: Navbar; + readonly tabs: HomeFlextab; + readonly createRoomModal: CreateRoomModal; + constructor(page: Page) { this.page = page; this.content = new HomeContent(page); this.sidenav = new HomeSidenav(page); + this.sidebar = new Sidebar(page); + this.navbar = new Navbar(page); this.tabs = new HomeFlextab(page); + this.createRoomModal = new CreateRoomModal(page); } get inputChannelName(): Locator { diff --git a/apps/meteor/tests/e2e/page-objects/home-omnichannel.ts b/apps/meteor/tests/e2e/page-objects/home-omnichannel.ts index 89fde4b5a904..60015c94b749 100644 --- a/apps/meteor/tests/e2e/page-objects/home-omnichannel.ts +++ b/apps/meteor/tests/e2e/page-objects/home-omnichannel.ts @@ -1,6 +1,6 @@ import type { Locator, Page } from '@playwright/test'; -import { HomeOmnichannelContent, HomeSidenav, HomeFlextab, OmnichannelSidenav } from './fragments'; +import { HomeOmnichannelContent, HomeSidenav, HomeFlextab, OmnichannelSidenav, Sidebar, Navbar } from './fragments'; import { OmnichannelAgents } from './omnichannel-agents'; import { OmnichannelCannedResponses } from './omnichannel-canned-responses'; import { OmnichannelContacts } from './omnichannel-contacts-list'; @@ -17,6 +17,10 @@ export class HomeOmnichannel { readonly sidenav: HomeSidenav; + readonly sidebar: Sidebar; + + readonly navbar: Navbar; + readonly tabs: HomeFlextab; readonly triggers: OmnichannelTriggers; @@ -41,6 +45,8 @@ export class HomeOmnichannel { this.page = page; this.content = new HomeOmnichannelContent(page); this.sidenav = new HomeSidenav(page); + this.sidebar = new Sidebar(page); + this.navbar = new Navbar(page); this.tabs = new HomeFlextab(page); this.triggers = new OmnichannelTriggers(page); this.omnisidenav = new OmnichannelSidenav(page); diff --git a/apps/meteor/tests/e2e/page-objects/home-team.ts b/apps/meteor/tests/e2e/page-objects/home-team.ts index 9225ca7a1b4d..82cd3b1330e8 100644 --- a/apps/meteor/tests/e2e/page-objects/home-team.ts +++ b/apps/meteor/tests/e2e/page-objects/home-team.ts @@ -1,6 +1,6 @@ import type { Locator, Page } from '@playwright/test'; -import { HomeContent, HomeFlextab, HomeSidenav } from './fragments'; +import { HomeContent, HomeFlextab, HomeSidenav, Sidebar, Navbar, CreateRoomModal } from './fragments'; export class HomeTeam { private readonly page: Page; @@ -9,13 +9,22 @@ export class HomeTeam { readonly sidenav: HomeSidenav; + readonly sidebar: Sidebar; + + readonly navbar: Navbar; + readonly tabs: HomeFlextab; + readonly createRoomModal: CreateRoomModal; + constructor(page: Page) { this.page = page; this.content = new HomeContent(page); this.sidenav = new HomeSidenav(page); + this.sidebar = new Sidebar(page); + this.navbar = new Navbar(page); this.tabs = new HomeFlextab(page); + this.createRoomModal = new CreateRoomModal(page); } get inputTeamName(): Locator { From ef7f63e13b2a45145db61c34e67f95e4a9c46bea Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Wed, 4 Dec 2024 12:53:08 -0300 Subject: [PATCH 10/24] fix: `CreateDirectMessage` a11y form to be located by the test fragment --- .../NavBarItemOmnichannelLivechatToggle.tsx | 7 +++---- .../client/sidebar/header/CreateDirectMessage.tsx | 11 ++++++++--- 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/apps/meteor/client/navbar/NavBarOmnichannelToolbar/NavBarItemOmnichannelLivechatToggle.tsx b/apps/meteor/client/navbar/NavBarOmnichannelToolbar/NavBarItemOmnichannelLivechatToggle.tsx index abf8ca432c28..26781df4e3e5 100644 --- a/apps/meteor/client/navbar/NavBarOmnichannelToolbar/NavBarItemOmnichannelLivechatToggle.tsx +++ b/apps/meteor/client/navbar/NavBarOmnichannelToolbar/NavBarItemOmnichannelLivechatToggle.tsx @@ -1,4 +1,4 @@ -import { Sidebar } from '@rocket.chat/fuselage'; +import { NavBarItem } from '@rocket.chat/fuselage'; import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useEndpoint, useToastMessageDispatch } from '@rocket.chat/ui-contexts'; import type { ReactElement, ComponentProps } from 'react'; @@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next'; import { useOmnichannelAgentAvailable } from '../../hooks/omnichannel/useOmnichannelAgentAvailable'; -type NavBarItemOmnichannelLivechatToggleProps = Omit, 'icon'>; +type NavBarItemOmnichannelLivechatToggleProps = Omit, 'icon'>; const NavBarItemOmnichannelLivechatToggle = (props: NavBarItemOmnichannelLivechatToggleProps): ReactElement => { const { t } = useTranslation(); @@ -24,9 +24,8 @@ const NavBarItemOmnichannelLivechatToggle = (props: NavBarItemOmnichannelLivecha }); return ( - void }; const CreateDirectMessage = ({ onClose }: CreateDirectMessageProps) => { const t = useTranslation(); const directMaxUsers = useSetting('DirectMesssage_maxUsers', 1); - const membersFieldId = useUniqueId(); const dispatchToastMessage = useToastMessageDispatch(); const createDirectAction = useEndpoint('POST', '/v1/dm.create'); + const membersFieldId = useUniqueId(); + const createDirectFormId = useUniqueId(); + const { control, handleSubmit, @@ -43,9 +45,12 @@ const CreateDirectMessage = ({ onClose }: CreateDirectMessageProps) => { }; return ( - }> + } + > - {t('Create_direct_message')} + {t('Create_direct_message')} From f743ebd0456d202843edfe98f418ae11ed95c459 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Wed, 4 Dec 2024 15:49:05 -0300 Subject: [PATCH 11/24] test: replace test fragments --- apps/meteor/tests/e2e/account-profile.spec.ts | 2 +- apps/meteor/tests/e2e/anonymous-user.spec.ts | 2 +- apps/meteor/tests/e2e/avatar-settings.ts | 8 ++--- apps/meteor/tests/e2e/create-channel.spec.ts | 24 ++++++++----- apps/meteor/tests/e2e/create-direct.spec.ts | 6 ++-- .../tests/e2e/create-discussion.spec.ts | 8 ++--- apps/meteor/tests/e2e/emojis.spec.ts | 6 ++-- apps/meteor/tests/e2e/file-upload.spec.ts | 4 +-- apps/meteor/tests/e2e/image-gallery.spec.ts | 10 +++--- apps/meteor/tests/e2e/mark-unread.spec.ts | 33 +++++++++++------- apps/meteor/tests/e2e/message-actions.spec.ts | 22 ++++++------ .../meteor/tests/e2e/message-composer.spec.ts | 16 +++++---- .../meteor/tests/e2e/message-mentions.spec.ts | 34 +++++++++---------- .../page-objects/fragments/home-content.ts | 6 +++- .../e2e/page-objects/fragments/sidebar.ts | 11 ++++-- 15 files changed, 108 insertions(+), 84 deletions(-) diff --git a/apps/meteor/tests/e2e/account-profile.spec.ts b/apps/meteor/tests/e2e/account-profile.spec.ts index c549a8b420c7..d1224683ccf9 100644 --- a/apps/meteor/tests/e2e/account-profile.spec.ts +++ b/apps/meteor/tests/e2e/account-profile.spec.ts @@ -31,7 +31,7 @@ test.describe.serial('settings-account-profile', () => { await poAccountProfile.inputUsername.fill(newUsername); await poAccountProfile.btnSubmit.click(); await poAccountProfile.btnClose.click(); - await poHomeChannel.sidenav.openChat('general'); + await poHomeChannel.sidebar.openChat('general'); await poHomeChannel.content.sendMessage('any_message'); await expect(poHomeChannel.content.lastUserMessageNotSequential).toContainText(newUsername); diff --git a/apps/meteor/tests/e2e/anonymous-user.spec.ts b/apps/meteor/tests/e2e/anonymous-user.spec.ts index 45fb03284a59..30f001da31b1 100644 --- a/apps/meteor/tests/e2e/anonymous-user.spec.ts +++ b/apps/meteor/tests/e2e/anonymous-user.spec.ts @@ -21,7 +21,7 @@ test.describe('anonymous-user', () => { poHomeChannel = new HomeChannel(page); await page.goto('/home'); - await poHomeChannel.sidenav.openChat('general'); + await poHomeChannel.sidebar.openChat('general'); }); test('expect to go to the login page as anonymous user', async ({ page }) => { diff --git a/apps/meteor/tests/e2e/avatar-settings.ts b/apps/meteor/tests/e2e/avatar-settings.ts index cba8c5ae63ba..07675f54d23a 100644 --- a/apps/meteor/tests/e2e/avatar-settings.ts +++ b/apps/meteor/tests/e2e/avatar-settings.ts @@ -8,16 +8,16 @@ test.use({ storageState: Users.admin.state }); const testAvatars = (homeChannel: HomeChannel, channel: string, url: string) => { test('expect sidebar avatar to have provider prefix', async () => { - expect(homeChannel.sidenav.getSidebarItemByName(channel).locator('img').getAttribute('src')).toBe(url); + expect(homeChannel.sidebar.getSidebarItemByName(channel).locator('img').getAttribute('src')).toBe(url); }); test('expect channel header avatar to have provider prefix', async () => { - await homeChannel.sidenav.openChat(channel); + await homeChannel.sidebar.openChat(channel); expect(homeChannel.content.channelHeader.locator('img').getAttribute('src')).toBe(url); }); test('expect channel info avatar to have provider prefix', async () => { - await homeChannel.sidenav.openChat(channel); + await homeChannel.sidebar.openChat(channel); expect(homeChannel.content.channelHeader.locator('img').getAttribute('src')).toBe(url); }); }; @@ -77,7 +77,7 @@ test.describe('avatar-settings', () => { // send a message as user 2 test.use({ storageState: Users.user2.state }); - await poHomeChannel.sidenav.openChat(Users.user1.data.username); + await poHomeChannel.sidebar.openChat(Users.user1.data.username); await poHomeChannel.content.sendMessage('hello world'); test.use({ storageState: Users.user1.state }); diff --git a/apps/meteor/tests/e2e/create-channel.spec.ts b/apps/meteor/tests/e2e/create-channel.spec.ts index 90aa48e9f744..25a263997b52 100644 --- a/apps/meteor/tests/e2e/create-channel.spec.ts +++ b/apps/meteor/tests/e2e/create-channel.spec.ts @@ -2,12 +2,14 @@ import { faker } from '@faker-js/faker'; import { Users } from './fixtures/userStates'; import { HomeChannel } from './page-objects'; +import { deleteChannel } from './utils'; import { test, expect } from './utils/test'; test.use({ storageState: Users.admin.state }); test.describe.serial('create-channel', () => { let poHomeChannel: HomeChannel; + let channelName: string; test.beforeEach(async ({ page }) => { poHomeChannel = new HomeChannel(page); @@ -15,23 +17,27 @@ test.describe.serial('create-channel', () => { await page.goto('/home'); }); + test.beforeEach(async ({ api }) => { + await deleteChannel(api, channelName); + }); + test('expect create a public channel', async ({ page }) => { - const channelName = faker.string.uuid(); + channelName = faker.string.uuid(); - await poHomeChannel.sidenav.openNewByLabel('Channel'); - await poHomeChannel.sidenav.inputChannelName.type(channelName); - await poHomeChannel.sidenav.checkboxPrivateChannel.click(); - await poHomeChannel.sidenav.btnCreate.click(); + await poHomeChannel.sidebar.openCreateNewByLabel('Channel'); + await poHomeChannel.createRoomModal.inputChannelName.fill(channelName); + await poHomeChannel.createRoomModal.checkboxPrivate.click(); + await poHomeChannel.createRoomModal.btnCreate.click(); await expect(page).toHaveURL(`/channel/${channelName}`); }); test('expect create a private channel', async ({ page }) => { - const channelName = faker.string.uuid(); + channelName = faker.string.uuid(); - await poHomeChannel.sidenav.openNewByLabel('Channel'); - await poHomeChannel.sidenav.inputChannelName.type(channelName); - await poHomeChannel.sidenav.btnCreate.click(); + await poHomeChannel.sidebar.openCreateNewByLabel('Channel'); + await poHomeChannel.createRoomModal.inputChannelName.fill(channelName); + await poHomeChannel.createRoomModal.btnCreate.click(); await expect(page).toHaveURL(`/group/${channelName}`); }); diff --git a/apps/meteor/tests/e2e/create-direct.spec.ts b/apps/meteor/tests/e2e/create-direct.spec.ts index 1b4e2d7c752d..b3059c542b52 100644 --- a/apps/meteor/tests/e2e/create-direct.spec.ts +++ b/apps/meteor/tests/e2e/create-direct.spec.ts @@ -14,13 +14,13 @@ test.describe.serial('channel-direct-message', () => { }); test('expect create a direct room', async ({ page }) => { - await poHomeChannel.sidenav.openNewByLabel('Direct message'); + await poHomeChannel.sidebar.openCreateNewByLabel('Direct message'); - await poHomeChannel.sidenav.inputDirectUsername.click(); + await poHomeChannel.createRoomModal.inputDirectUsernames.click(); await page.keyboard.type('rocket.cat'); await page.waitForTimeout(200); await page.keyboard.press('Enter'); - await poHomeChannel.sidenav.btnCreate.click(); + await poHomeChannel.createRoomModal.btnCreate.click(); await expect(page).toHaveURL('direct/rocket.catrocketchat.internal.admin.test'); }); diff --git a/apps/meteor/tests/e2e/create-discussion.spec.ts b/apps/meteor/tests/e2e/create-discussion.spec.ts index cb54a9dce393..9b7fc2ce4377 100644 --- a/apps/meteor/tests/e2e/create-discussion.spec.ts +++ b/apps/meteor/tests/e2e/create-discussion.spec.ts @@ -19,11 +19,11 @@ test.describe.serial('create-discussion', () => { const discussionName = faker.string.uuid(); const discussionMessage = faker.animal.type(); - await poHomeDiscussion.sidenav.openNewByLabel('Discussion'); - await poHomeDiscussion.inputChannelName.type('general'); + await poHomeDiscussion.sidebar.openCreateNewByLabel('Discussion'); + await poHomeDiscussion.inputChannelName.fill('general'); await page.locator('role=listbox >> role=option[name=general]').click(); - await poHomeDiscussion.inputName.type(discussionName); - await poHomeDiscussion.inputMessage.type(discussionMessage); + await poHomeDiscussion.inputName.fill(discussionName); + await poHomeDiscussion.inputMessage.fill(discussionMessage); await poHomeDiscussion.btnCreate.click(); await expect(page).toHaveURL(/\/channel\/[a-z0-9]{0,17}$/i); diff --git a/apps/meteor/tests/e2e/emojis.spec.ts b/apps/meteor/tests/e2e/emojis.spec.ts index e62a0b544ed7..c4c481224e2d 100644 --- a/apps/meteor/tests/e2e/emojis.spec.ts +++ b/apps/meteor/tests/e2e/emojis.spec.ts @@ -20,7 +20,7 @@ test.describe.serial('emoji', () => { }); test('expect pick and send grinning emoji', async ({ page }) => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await poHomeChannel.content.pickEmoji('grinning'); await page.keyboard.press('Enter'); @@ -28,7 +28,7 @@ test.describe.serial('emoji', () => { }); test('expect send emoji via text', async ({ page }) => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await poHomeChannel.content.sendMessage(':innocent:'); await page.keyboard.press('Enter'); @@ -36,7 +36,7 @@ test.describe.serial('emoji', () => { }); test('expect render special characters and numbers properly', async () => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await poHomeChannel.content.sendMessage('® © ™ # *'); await expect(poHomeChannel.content.lastUserMessage).toContainText('® © ™ # *'); diff --git a/apps/meteor/tests/e2e/file-upload.spec.ts b/apps/meteor/tests/e2e/file-upload.spec.ts index 626162df47d3..54fc5a11af96 100644 --- a/apps/meteor/tests/e2e/file-upload.spec.ts +++ b/apps/meteor/tests/e2e/file-upload.spec.ts @@ -19,7 +19,7 @@ test.describe.serial('file-upload', () => { poHomeChannel = new HomeChannel(page); await page.goto('/home'); - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); }); test.afterAll(async ({ api }) => { @@ -89,7 +89,7 @@ test.describe('file-upload-not-member', () => { poHomeChannel = new HomeChannel(page); await page.goto('/home'); - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); }); test.afterAll(async ({ api }) => { diff --git a/apps/meteor/tests/e2e/image-gallery.spec.ts b/apps/meteor/tests/e2e/image-gallery.spec.ts index 526e695870df..070b6feb9f4d 100644 --- a/apps/meteor/tests/e2e/image-gallery.spec.ts +++ b/apps/meteor/tests/e2e/image-gallery.spec.ts @@ -23,10 +23,10 @@ test.describe.serial('Image Gallery', async () => { const { page } = await createAuxContext(browser, Users.user1); poHomeChannel = new HomeChannel(page); - await poHomeChannel.sidenav.openChat(targetChannelLargeImage); + await poHomeChannel.sidebar.openChat(targetChannelLargeImage); await poHomeChannel.content.btnJoinRoom.click(); - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await poHomeChannel.content.btnJoinRoom.click(); }); @@ -38,14 +38,14 @@ test.describe.serial('Image Gallery', async () => { test.describe('When sending an image as a file', () => { test.beforeAll(async () => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); for await (const imageName of imageNames) { await poHomeChannel.content.sendFileMessage(imageName); await poHomeChannel.content.btnModalConfirm.click(); await expect(poHomeChannel.content.lastUserMessage).toContainText(imageName); } - await poHomeChannel.sidenav.openChat(targetChannelLargeImage); + await poHomeChannel.sidebar.openChat(targetChannelLargeImage); await poHomeChannel.content.sendFileMessage('test-large-image.jpeg'); await poHomeChannel.content.btnModalConfirm.click(); await expect(poHomeChannel.content.lastUserMessage).toContainText('test-large-image.jpeg'); @@ -94,7 +94,7 @@ test.describe.serial('Image Gallery', async () => { }); test('expect successfully move to older images by using the left arrow button', async () => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await poHomeChannel.content.lastUserMessage.locator('img.gallery-item').click(); /* eslint-disable no-await-in-loop */ for (let i = 0; i < imageNames.length - 1; i++) { diff --git a/apps/meteor/tests/e2e/mark-unread.spec.ts b/apps/meteor/tests/e2e/mark-unread.spec.ts index 81ae93965856..c63fc1641f3f 100644 --- a/apps/meteor/tests/e2e/mark-unread.spec.ts +++ b/apps/meteor/tests/e2e/mark-unread.spec.ts @@ -24,26 +24,32 @@ test.describe.serial('mark-unread', () => { test.describe('Mark Unread - Sidebar Action', () => { test('should not mark empty room as unread', async () => { - await poHomeChannel.sidenav.selectMarkAsUnread(targetChannel); + await poHomeChannel.sidebar.typeSearch(targetChannel); + const item = poHomeChannel.sidebar.getSearchRoomByName(targetChannel); + await poHomeChannel.sidebar.markItemAsUnread(item); + await poHomeChannel.sidebar.escSearch(); - await expect(poHomeChannel.sidenav.getRoomBadge(targetChannel)).not.toBeVisible(); + await expect(poHomeChannel.sidebar.getItemUnreadBadge(item)).not.toBeVisible(); }); test('should mark a populated room as unread', async () => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await poHomeChannel.content.sendMessage('this is a message for reply'); - await poHomeChannel.sidenav.selectMarkAsUnread(targetChannel); + const item = poHomeChannel.sidebar.getSidebarItemByName(targetChannel); + await poHomeChannel.sidebar.markItemAsUnread(item); - await expect(poHomeChannel.sidenav.getRoomBadge(targetChannel)).toBeVisible(); + await expect(poHomeChannel.sidebar.getItemUnreadBadge(item)).toBeVisible(); }); test('should mark a populated room as unread - search', async () => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await poHomeChannel.content.sendMessage('this is a message for reply'); - await poHomeChannel.sidenav.selectMarkAsUnread(targetChannel); - await poHomeChannel.sidenav.searchRoom(targetChannel); + const item = poHomeChannel.sidebar.getSidebarItemByName(targetChannel); + await poHomeChannel.sidebar.markItemAsUnread(item); + await poHomeChannel.sidebar.typeSearch(targetChannel); + const searchItem = poHomeChannel.sidebar.getSearchRoomByName(targetChannel); - await expect(poHomeChannel.sidenav.getSearchChannelBadge(targetChannel)).toBeVisible(); + await expect(poHomeChannel.sidebar.getItemUnreadBadge(searchItem)).toBeVisible(); }); }); @@ -54,18 +60,19 @@ test.describe.serial('mark-unread', () => { const { page: user2Page } = await createAuxContext(browser, Users.user2); poHomeChannelUser2 = new HomeChannel(user2Page); - await poHomeChannelUser2.sidenav.openChat(targetChannel); + await poHomeChannelUser2.sidebar.openChat(targetChannel); await poHomeChannelUser2.content.sendMessage('this is a message for reply'); await user2Page.close(); - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); // wait for the sidebar item to be read - await poHomeChannel.sidenav.getSidebarItemByName(targetChannel, true).waitFor(); + await poHomeChannel.sidebar.waitForReadItem(targetChannel); await poHomeChannel.content.openLastMessageMenu(); await poHomeChannel.markUnread.click(); - await expect(poHomeChannel.sidenav.getRoomBadge(targetChannel)).toBeVisible(); + const item = poHomeChannel.sidebar.getSidebarItemByName(targetChannel); + await expect(poHomeChannel.sidebar.getItemUnreadBadge(item)).toBeVisible(); }); }); }); diff --git a/apps/meteor/tests/e2e/message-actions.spec.ts b/apps/meteor/tests/e2e/message-actions.spec.ts index 1dbaf04b3b9b..f89bb9323d1b 100644 --- a/apps/meteor/tests/e2e/message-actions.spec.ts +++ b/apps/meteor/tests/e2e/message-actions.spec.ts @@ -21,7 +21,7 @@ test.describe.serial('message-actions', () => { poHomeChannel = new HomeChannel(page); poHomeDiscussion = new HomeDiscussion(page); await page.goto('/home'); - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); }); test('expect reply the message in direct', async ({ page }) => { await poHomeChannel.content.sendMessage('this is a message for reply in direct'); @@ -150,7 +150,7 @@ test.describe.serial('message-actions', () => { await poHomeDiscussion.inputName.fill(discussionName); await createButton.click(); await expect(page.locator('header h1')).toHaveText(discussionName); - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); // Should fail if more than one discussion has been created await expect(poHomeChannel.content.getMessageByText(discussionName)).toHaveCount(1); }); @@ -195,7 +195,7 @@ test.describe.serial('message-actions', () => { test.beforeEach(async ({ page }) => { poHomeChannel = new HomeChannel(page); await page.goto('/home'); - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); }); test('expect reply the message in direct', async ({ page }) => { await poHomeChannel.content.sendMessage('this is a message for reply in direct'); @@ -211,7 +211,7 @@ test.describe.serial('message-actions', () => { await poHomeChannel.content.sendMessage(message); await poHomeChannel.content.forwardMessage(forwardChannel); - await poHomeChannel.sidenav.openChat(forwardChannel); + await poHomeChannel.sidebar.openChat(forwardChannel); await expect(poHomeChannel.content.lastUserMessage).toContainText(message); }); @@ -220,7 +220,7 @@ test.describe.serial('message-actions', () => { await poHomeChannel.content.sendMessage(message); await poHomeChannel.content.forwardMessage(forwardTeam); - await poHomeChannel.sidenav.openChat(forwardTeam); + await poHomeChannel.sidebar.openChat(forwardTeam); await expect(poHomeChannel.content.lastUserMessage).toContainText(message); }); @@ -232,7 +232,7 @@ test.describe.serial('message-actions', () => { await poHomeChannel.content.sendMessage(message); await poHomeChannel.content.forwardMessage(direct); - await poHomeChannel.sidenav.openChat(ADMIN_CREDENTIALS.username); + await poHomeChannel.sidebar.openChat(ADMIN_CREDENTIALS.username); await expect(poHomeChannel.content.lastUserMessage).toContainText(message); }); @@ -244,7 +244,7 @@ test.describe.serial('message-actions', () => { await poHomeChannel.content.forwardMessage(forwardChannel); - await poHomeChannel.sidenav.openChat(forwardChannel); + await poHomeChannel.sidebar.openChat(forwardChannel); await expect(poHomeChannel.content.lastUserMessage).toContainText(filename); }); @@ -256,7 +256,7 @@ test.describe.serial('message-actions', () => { await poHomeChannel.content.forwardMessage(forwardChannel); - await poHomeChannel.sidenav.openChat(forwardChannel); + await poHomeChannel.sidebar.openChat(forwardChannel); await expect(poHomeChannel.content.lastUserMessage).toContainText(filename); }); @@ -268,7 +268,7 @@ test.describe.serial('message-actions', () => { await poHomeChannel.content.forwardMessage(forwardChannel); - await poHomeChannel.sidenav.openChat(forwardChannel); + await poHomeChannel.sidebar.openChat(forwardChannel); await expect(poHomeChannel.content.lastUserMessage).toContainText(filename); }); @@ -280,7 +280,7 @@ test.describe.serial('message-actions', () => { await poHomeChannel.content.forwardMessage(forwardChannel); - await poHomeChannel.sidenav.openChat(forwardChannel); + await poHomeChannel.sidebar.openChat(forwardChannel); await expect(poHomeChannel.content.lastUserMessage).toContainText(filename); }); @@ -292,7 +292,7 @@ test.describe.serial('message-actions', () => { await poHomeChannel.content.forwardMessage(forwardChannel); - await poHomeChannel.sidenav.openChat(forwardChannel); + await poHomeChannel.sidebar.openChat(forwardChannel); await expect(poHomeChannel.content.lastUserMessage).toContainText(filename); }); }); diff --git a/apps/meteor/tests/e2e/message-composer.spec.ts b/apps/meteor/tests/e2e/message-composer.spec.ts index 2ed3bcbb238e..61be2378ab47 100644 --- a/apps/meteor/tests/e2e/message-composer.spec.ts +++ b/apps/meteor/tests/e2e/message-composer.spec.ts @@ -22,7 +22,7 @@ test.describe.serial('message-composer', () => { }); test('should have all formatters and the main actions visible on toolbar', async () => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await poHomeChannel.content.sendMessage('hello composer'); await expect(poHomeChannel.composerToolbarActions).toHaveCount(12); @@ -30,13 +30,14 @@ test.describe.serial('message-composer', () => { test('should have only the main formatter and the main action', async ({ page }) => { await page.setViewportSize({ width: 768, height: 600 }); - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await expect(poHomeChannel.composerToolbarActions).toHaveCount(5); }); test('should navigate on toolbar using arrow keys', async ({ page }) => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); + await poHomeChannel.content.waitForChannel(); await page.keyboard.press('Tab'); await page.keyboard.press('ArrowRight'); @@ -48,7 +49,7 @@ test.describe.serial('message-composer', () => { }); test('should move the focus away from toolbar using tab key', async ({ page }) => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await page.keyboard.press('Tab'); await page.keyboard.press('Tab'); @@ -58,9 +59,10 @@ test.describe.serial('message-composer', () => { test('should add a link to the selected text', async ({ page }) => { const url = faker.internet.url(); - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); + await poHomeChannel.content.waitForChannel(); + await poHomeChannel.content.typeMessage('hello composer'); - await page.keyboard.type('hello composer'); await page.keyboard.press('Control+A'); // on Windows and Linux await page.keyboard.press('Meta+A'); // on macOS await poHomeChannel.composerToolbar.getByRole('button', { name: 'Link' }).click(); @@ -71,7 +73,7 @@ test.describe.serial('message-composer', () => { }); test('should select popup item and not send the message when pressing enter', async ({ page }) => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await poHomeChannel.content.sendMessage('hello composer'); await test.step('mention popup', async () => { diff --git a/apps/meteor/tests/e2e/message-mentions.spec.ts b/apps/meteor/tests/e2e/message-mentions.spec.ts index 15abd9c36b40..945d840827e5 100644 --- a/apps/meteor/tests/e2e/message-mentions.spec.ts +++ b/apps/meteor/tests/e2e/message-mentions.spec.ts @@ -49,9 +49,9 @@ test.describe.serial('Should not allow to send @all mention if permission to do await test.step('create private room', async () => { targetChannel2 = faker.string.uuid(); - await poHomeChannel.sidenav.openNewByLabel('Channel'); - await poHomeChannel.sidenav.inputChannelName.type(targetChannel2); - await poHomeChannel.sidenav.btnCreate.click(); + await poHomeChannel.sidebar.openCreateNewByLabel('Channel'); + await poHomeChannel.createRoomModal.inputChannelName.fill(targetChannel2); + await poHomeChannel.createRoomModal.btnCreate.click(); await expect(page).toHaveURL(`/group/${targetChannel2}`); }); @@ -91,9 +91,9 @@ test.describe.serial('Should not allow to send @here mention if permission to do await test.step('create private room', async () => { targetChannel2 = faker.string.uuid(); - await poHomeChannel.sidenav.openNewByLabel('Channel'); - await poHomeChannel.sidenav.inputChannelName.type(targetChannel2); - await poHomeChannel.sidenav.btnCreate.click(); + await poHomeChannel.sidebar.openCreateNewByLabel('Channel'); + await poHomeChannel.createRoomModal.inputChannelName.fill(targetChannel2); + await poHomeChannel.createRoomModal.btnCreate.click(); await expect(page).toHaveURL(`/group/${targetChannel2}`); }); @@ -114,7 +114,7 @@ test.describe.serial('message-mentions', () => { }); test('expect show "all" and "here" options', async () => { - await poHomeChannel.sidenav.openChat('general'); + await poHomeChannel.sidebar.openChat('general'); await poHomeChannel.content.inputMessage.type('@'); await expect(poHomeChannel.content.messagePopupUsers.locator('role=listitem >> text="all"')).toBeVisible(); @@ -137,7 +137,7 @@ test.describe.serial('message-mentions', () => { const mentionText = getMentionText(Users.user1.data.username, 1); await test.step('receive bot message', async () => { - await adminPage.sidenav.openChat(targetChannel); + await adminPage.sidebar.openChat(targetChannel); await adminPage.content.sendMessage(getMentionText(Users.user1.data.username)); await expect(adminPage.content.lastUserMessage.locator('.rcx-message-block')).toContainText(mentionText); }); @@ -183,7 +183,7 @@ test.describe.serial('message-mentions', () => { const userPage = new HomeChannel(page); await test.step('receive bot message', async () => { - await userPage.sidenav.openChat(targetChannel); + await userPage.sidebar.openChat(targetChannel); await userPage.content.sendMessage(getMentionText(Users.user2.data.username)); await expect(userPage.content.lastUserMessage.locator('.rcx-message-block')).toContainText(mentionText); }); @@ -203,7 +203,7 @@ test.describe.serial('message-mentions', () => { }); await test.step('receive second bot message', async () => { - await userPage.sidenav.openChat(targetChannel); + await userPage.sidebar.openChat(targetChannel); await userPage.content.sendMessage(getMentionText(Users.user2.data.username)); await expect(userPage.content.lastUserMessage.locator('.rcx-message-block')).toContainText(mentionText); }); @@ -233,15 +233,15 @@ test.describe.serial('message-mentions', () => { await test.step('create private room', async () => { targetChannel2 = faker.string.uuid(); - await poHomeChannel.sidenav.openNewByLabel('Channel'); - await poHomeChannel.sidenav.inputChannelName.type(targetChannel2); - await poHomeChannel.sidenav.btnCreate.click(); + await poHomeChannel.sidebar.openCreateNewByLabel('Channel'); + await poHomeChannel.createRoomModal.inputChannelName.fill(targetChannel2); + await poHomeChannel.createRoomModal.btnCreate.click(); await expect(page).toHaveURL(`/group/${targetChannel2}`); }); await test.step('receive bot message', async () => { - await userPage.sidenav.openChat(targetChannel2); + await userPage.sidebar.openChat(targetChannel2); await userPage.content.sendMessage(getMentionText(Users.user2.data.username)); await expect(userPage.content.lastUserMessage.locator('.rcx-message-block')).toContainText(mentionText); }); @@ -260,7 +260,7 @@ test.describe.serial('message-mentions', () => { }); await test.step('receive second bot message', async () => { - await userPage.sidenav.openChat(targetChannel2); + await userPage.sidebar.openChat(targetChannel2); await userPage.content.sendMessage(getMentionText(Users.user2.data.username)); await expect(userPage.content.lastUserMessage.locator('.rcx-message-block')).toContainText(mentionText); }); @@ -286,7 +286,7 @@ test.describe.serial('message-mentions', () => { const userPage = new HomeChannel(page); await test.step('receive bot message', async () => { - await userPage.sidenav.openChat(targetChannel2); + await userPage.sidebar.openChat(targetChannel2); await userPage.content.sendMessage(getMentionText(Users.user3.data.username)); await expect(userPage.content.lastUserMessage.locator('.rcx-message-block')).toContainText( getMentionText(Users.user3.data.username, 2), @@ -320,7 +320,7 @@ test.describe.serial('message-mentions', () => { const userPage = new HomeChannel(page); await test.step('do not receive bot message', async () => { - await userPage.sidenav.openChat(targetChannel); + await userPage.sidebar.openChat(targetChannel); await userPage.content.sendMessage(getMentionText(team)); await expect(userPage.content.lastUserMessage.locator('.rcx-message-block')).not.toBeVisible(); }); diff --git a/apps/meteor/tests/e2e/page-objects/fragments/home-content.ts b/apps/meteor/tests/e2e/page-objects/fragments/home-content.ts index 0c77364ed57a..6431d3e60c8c 100644 --- a/apps/meteor/tests/e2e/page-objects/fragments/home-content.ts +++ b/apps/meteor/tests/e2e/page-objects/fragments/home-content.ts @@ -81,10 +81,14 @@ export class HomeContent { await this.joinRoom(); } - async sendMessage(text: string): Promise { + async typeMessage(text: string): Promise { await this.joinRoomIfNeeded(); await this.page.waitForSelector('[name="msg"]:not([disabled])'); await this.page.locator('[name="msg"]').fill(text); + } + + async sendMessage(text: string): Promise { + await this.typeMessage(text); await this.page.getByRole('button', { name: 'Send', exact: true }).click(); } diff --git a/apps/meteor/tests/e2e/page-objects/fragments/sidebar.ts b/apps/meteor/tests/e2e/page-objects/fragments/sidebar.ts index dda449cca8f1..16684e34dc0c 100644 --- a/apps/meteor/tests/e2e/page-objects/fragments/sidebar.ts +++ b/apps/meteor/tests/e2e/page-objects/fragments/sidebar.ts @@ -63,22 +63,27 @@ export class Sidebar { } getSearchRoomByName(name: string): Locator { - return this.searchList.getByRole('link', { name }); + return this.searchList.getByRole('link', { name, exact: true }); } getSidebarItemByName(name: string): Locator { - return this.channelsList.getByRole('link', { name }); + return this.channelsList.getByRole('link', { name, exact: true }); + } + + async waitForReadItem(name: string): Promise { + await this.sidebar.locator(`a[aria-label="${name}"][data-unread="false"]`).waitFor(); } async openChat(name: string): Promise { await this.typeSearch(name); await this.getSearchRoomByName(name).click(); + await this.waitForChannel(); } async openItemMenu(item: Locator): Promise { await item.hover(); await item.focus(); - await item.locator('.rcx-sidebar-item__menu').click(); + await item.locator('.rcx-sidebar-v2-item__menu-wrapper').click(); } async markItemAsUnread(item: Locator): Promise { From 11e37ad817b7fc134ec535d6917ffaab5aa09826 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Wed, 4 Dec 2024 17:37:26 -0300 Subject: [PATCH 12/24] test: replace test fragments --- .../e2e/apps/app-modal-interaction.spec.ts | 8 +++--- .../tests/e2e/apps/apps-contextualbar.spec.ts | 2 +- apps/meteor/tests/e2e/apps/apps-modal.spec.ts | 2 +- .../meteor/tests/e2e/message-mentions.spec.ts | 4 +-- apps/meteor/tests/e2e/messaging.spec.ts | 18 ++++++------ .../page-objects/fragments/home-content.ts | 2 +- .../e2e/page-objects/fragments/navbar.ts | 16 +++++++++-- apps/meteor/tests/e2e/permissions.spec.ts | 16 +++++------ apps/meteor/tests/e2e/read-receipts.spec.ts | 8 +++--- .../meteor/tests/e2e/retention-policy.spec.ts | 28 +++++++++---------- .../tests/e2e/search-discussion.spec.ts | 3 +- .../e2e/sidebar-administration-menu.spec.ts | 6 ++-- apps/meteor/tests/e2e/sidebar.spec.ts | 11 ++++---- apps/meteor/tests/e2e/system-messages.spec.ts | 2 +- apps/meteor/tests/e2e/threads.spec.ts | 4 +-- .../user-card-info-actions-by-member.spec.ts | 4 +-- ...er-card-info-actions-by-room-owner.spec.ts | 4 +-- .../tests/e2e/video-conference-ring.spec.ts | 4 +-- .../meteor/tests/e2e/video-conference.spec.ts | 18 ++++++------ 19 files changed, 86 insertions(+), 74 deletions(-) diff --git a/apps/meteor/tests/e2e/apps/app-modal-interaction.spec.ts b/apps/meteor/tests/e2e/apps/app-modal-interaction.spec.ts index e2f25e913427..d5a93b8a3b5b 100644 --- a/apps/meteor/tests/e2e/apps/app-modal-interaction.spec.ts +++ b/apps/meteor/tests/e2e/apps/app-modal-interaction.spec.ts @@ -22,7 +22,7 @@ test.describe.skip('app-surfaces-interaction', () => { }); test('expect to submit an success modal', async ({ page }) => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await page.locator('role=button[name="Options"]').click(); await page.locator('[data-key="success"]').click(); await page.locator('role=button[name="success"]').click(); @@ -32,7 +32,7 @@ test.describe.skip('app-surfaces-interaction', () => { }); test('expect to not close the modal and there is an error in the modal', async ({ page }) => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await page.locator('role=button[name="Options"]').click(); await page.locator('[data-key="error"]').click(); await page.locator('role=button[name="error"]').click(); @@ -50,7 +50,7 @@ test.describe.skip('app-surfaces-interaction', () => { }); test('expect to show the toaster error for modal that timeout the execution', async ({ page }) => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await page.locator('role=button[name="Options"]').click(); await page.locator('[data-key="timeout"]').click(); await page.locator('role=button[name="timeout"]').click(); @@ -62,7 +62,7 @@ test.describe.skip('app-surfaces-interaction', () => { }); test('expect change the modal and then submit the updated modal', async ({ page }) => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await page.locator('role=button[name="Options"]').click(); await page.locator('[data-key="update"]').click(); await page.locator('role=button[name="update"]').click(); diff --git a/apps/meteor/tests/e2e/apps/apps-contextualbar.spec.ts b/apps/meteor/tests/e2e/apps/apps-contextualbar.spec.ts index 7ee6f8696afd..20df203d04cf 100644 --- a/apps/meteor/tests/e2e/apps/apps-contextualbar.spec.ts +++ b/apps/meteor/tests/e2e/apps/apps-contextualbar.spec.ts @@ -18,7 +18,7 @@ test.describe.serial('Apps > ContextualBar', () => { poHomeChannel = new HomeChannel(page); await page.goto('/home'); - await poHomeChannel.sidenav.openChat('general'); + await poHomeChannel.sidebar.openChat('general'); }); test.afterAll(async () => { diff --git a/apps/meteor/tests/e2e/apps/apps-modal.spec.ts b/apps/meteor/tests/e2e/apps/apps-modal.spec.ts index 638096a66ad8..00e1a3a6c327 100644 --- a/apps/meteor/tests/e2e/apps/apps-modal.spec.ts +++ b/apps/meteor/tests/e2e/apps/apps-modal.spec.ts @@ -22,7 +22,7 @@ test.describe.serial('Apps > Modal', () => { poModal = new Modal(page); await page.goto('/home'); - await poHomeChannel.sidenav.openChat('general'); + await poHomeChannel.sidebar.openChat('general'); }); test.afterAll(async () => { diff --git a/apps/meteor/tests/e2e/message-mentions.spec.ts b/apps/meteor/tests/e2e/message-mentions.spec.ts index 945d840827e5..8340d241b19a 100644 --- a/apps/meteor/tests/e2e/message-mentions.spec.ts +++ b/apps/meteor/tests/e2e/message-mentions.spec.ts @@ -113,9 +113,9 @@ test.describe.serial('message-mentions', () => { await page.goto('/home'); }); - test('expect show "all" and "here" options', async () => { + test.only('expect show "all" and "here" options', async () => { await poHomeChannel.sidebar.openChat('general'); - await poHomeChannel.content.inputMessage.type('@'); + await poHomeChannel.content.typeMessage('@'); await expect(poHomeChannel.content.messagePopupUsers.locator('role=listitem >> text="all"')).toBeVisible(); await expect(poHomeChannel.content.messagePopupUsers.locator('role=listitem >> text="here"')).toBeVisible(); diff --git a/apps/meteor/tests/e2e/messaging.spec.ts b/apps/meteor/tests/e2e/messaging.spec.ts index 9cd0c996993e..0e26da1ca4a1 100644 --- a/apps/meteor/tests/e2e/messaging.spec.ts +++ b/apps/meteor/tests/e2e/messaging.spec.ts @@ -23,7 +23,7 @@ test.describe.serial('Messaging', () => { }); test('should navigate on messages using keyboard', async ({ page }) => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await poHomeChannel.content.sendMessage('msg1'); await poHomeChannel.content.sendMessage('msg2'); @@ -79,7 +79,7 @@ test.describe.serial('Messaging', () => { }); test('should navigate properly on the user card', async ({ page }) => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); // open UserCard await page.keyboard.press('Shift+Tab'); @@ -105,7 +105,7 @@ test.describe.serial('Messaging', () => { }); test('should not restore focus on the last focused if it was triggered by click', async ({ page }) => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await page.locator('[data-qa-type="message"]:has-text("msg1")').click(); await poHomeChannel.composer.click(); await page.keyboard.press('Shift+Tab'); @@ -114,14 +114,14 @@ test.describe.serial('Messaging', () => { }); test('should not focus on the last message when focusing by click', async ({ page }) => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await page.locator('[data-qa-type="message"]:has-text("msg1")').click(); await expect(page.locator('[data-qa-type="message"]').last()).not.toBeFocused(); }); test('should focus the latest message when moving the focus on the list and theres no previous focus', async ({ page }) => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await page.getByRole('button', { name: targetChannel }).first().focus(); // move focus to the list @@ -151,9 +151,9 @@ test.describe.serial('Messaging', () => { }); test('expect show "hello word" in both contexts (targetChannel)', async () => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); - await auxContext.poHomeChannel.sidenav.openChat(targetChannel); + await auxContext.poHomeChannel.sidebar.openChat(targetChannel); await poHomeChannel.content.sendMessage('hello world'); @@ -164,8 +164,8 @@ test.describe.serial('Messaging', () => { }); test('expect show "hello word" in both contexts (direct)', async () => { - await poHomeChannel.sidenav.openChat('user2'); - await auxContext.poHomeChannel.sidenav.openChat('user1'); + await poHomeChannel.sidebar.openChat('user2'); + await auxContext.poHomeChannel.sidebar.openChat('user1'); await poHomeChannel.content.sendMessage('hello world'); diff --git a/apps/meteor/tests/e2e/page-objects/fragments/home-content.ts b/apps/meteor/tests/e2e/page-objects/fragments/home-content.ts index 6431d3e60c8c..e33b3a3ecff2 100644 --- a/apps/meteor/tests/e2e/page-objects/fragments/home-content.ts +++ b/apps/meteor/tests/e2e/page-objects/fragments/home-content.ts @@ -84,7 +84,7 @@ export class HomeContent { async typeMessage(text: string): Promise { await this.joinRoomIfNeeded(); await this.page.waitForSelector('[name="msg"]:not([disabled])'); - await this.page.locator('[name="msg"]').fill(text); + await this.page.locator('[name="msg"]').pressSequentially(text); } async sendMessage(text: string): Promise { diff --git a/apps/meteor/tests/e2e/page-objects/fragments/navbar.ts b/apps/meteor/tests/e2e/page-objects/fragments/navbar.ts index d81bf761a73f..a3e574922185 100644 --- a/apps/meteor/tests/e2e/page-objects/fragments/navbar.ts +++ b/apps/meteor/tests/e2e/page-objects/fragments/navbar.ts @@ -23,6 +23,10 @@ export class Navbar { return this.pagesToolbar.getByRole('button', { name: 'Home', exact: true }); } + get directoryButton(): Locator { + return this.pagesToolbar.getByRole('button', { name: 'Directory', exact: true }); + } + async openInstalledApps(): Promise { await this.pagesToolbar.getByRole('button', { name: 'Marketplace', exact: true }).click(); await this.pagesToolbar.getByRole('menu').getByRole('menuitem', { name: 'Installed', exact: true }).click(); @@ -40,8 +44,16 @@ export class Navbar { return this.settingsGroup.getByRole('menuitemcheckbox', { name: 'Profile', exact: true }); } - async openWorkspaceSettings(): Promise { - await this.settingsGroup.getByRole('button', { name: 'Workspace', exact: true }).click(); + async openWorkspaceSettingsMenu(): Promise { + await this.settingsGroup.getByRole('button', { name: 'Manage', exact: true }).click(); + } + + get workspaceMenuItem(): Locator { + return this.settingsGroup.getByRole('menuitem', { name: 'Workspace', exact: true }); + } + + get omnichannelMenuItem(): Locator { + return this.settingsGroup.getByRole('menuitem', { name: 'Omnichannel', exact: true }); } async switchStatus(status: 'offline' | 'online'): Promise { diff --git a/apps/meteor/tests/e2e/permissions.spec.ts b/apps/meteor/tests/e2e/permissions.spec.ts index 75bf44a159e2..6b0f6de78b91 100644 --- a/apps/meteor/tests/e2e/permissions.spec.ts +++ b/apps/meteor/tests/e2e/permissions.spec.ts @@ -27,7 +27,7 @@ test.describe.serial('permissions', () => { }); test('expect option(edit) not be visible', async ({ page }) => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await poHomeChannel.content.sendMessage('expect option(edit) not be visible'); @@ -54,7 +54,7 @@ test.describe.serial('permissions', () => { }); test('expect option(delete) not be visible', async ({ page }) => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await poHomeChannel.content.sendMessage('expect option(delete) not be visible'); await expect(page.locator('.rcx-message', { hasText: 'expect option(delete) not be visible' })).not.toHaveAttribute( @@ -84,7 +84,7 @@ test.describe.serial('permissions', () => { }); test('expect option(pin) not be visible', async ({ page }) => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await poHomeChannel.content.sendMessage('expect option(pin) not be visible'); await expect(page.locator('.rcx-message', { hasText: 'expect option(pin) not be visible' })).not.toHaveAttribute('aria-busy', 'true'); @@ -110,7 +110,7 @@ test.describe.serial('permissions', () => { }); test('expect option(star) not be visible', async ({ page }) => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await poHomeChannel.content.sendMessage('expect option(star) not be visible'); await expect(page.locator('.rcx-message', { hasText: 'expect option(star) not be visible' })).not.toHaveAttribute( @@ -137,7 +137,7 @@ test.describe.serial('permissions', () => { }); test('expect option (upload file) not be visible', async () => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await expect(poHomeChannel.content.btnOptionFileUpload).toBeDisabled(); }); @@ -156,7 +156,7 @@ test.describe.serial('permissions', () => { }); test('expect option (upload audio) not be visible', async () => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await expect(poHomeChannel.content.btnRecordAudio).toBeDisabled(); }); @@ -175,7 +175,7 @@ test.describe.serial('permissions', () => { }); test('expect option (upload video) not be visible', async () => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await expect(poHomeChannel.content.btnVideoMessage).toBeDisabled(); }); @@ -196,7 +196,7 @@ test.describe.serial('permissions', () => { }); test('expect badword be censored', async () => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await poHomeChannel.content.sendMessage('badword'); await expect(poHomeChannel.content.lastUserMessage).toContainText('*'.repeat(7)); diff --git a/apps/meteor/tests/e2e/read-receipts.spec.ts b/apps/meteor/tests/e2e/read-receipts.spec.ts index f61e1b2e1d1f..a42ba2dbe774 100644 --- a/apps/meteor/tests/e2e/read-receipts.spec.ts +++ b/apps/meteor/tests/e2e/read-receipts.spec.ts @@ -27,7 +27,7 @@ test.describe.serial('read-receipts', () => { test.describe('read receipt settings disabled', async () => { test('should not show read receipts item menu', async ({ page }) => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await poHomeChannel.content.sendMessage('hello world'); await poHomeChannel.content.openLastMessageMenu(); expect(page.locator('role=menuitem[name="Read receipts"]')).not.toBeVisible; @@ -57,19 +57,19 @@ test.describe.serial('read-receipts', () => { test('should show read receipts message sent status in the sent message', async ({ browser }) => { const { page } = await createAuxContext(browser, Users.user1); auxContext = { page, poHomeChannel: new HomeChannel(page) }; - await auxContext.poHomeChannel.sidenav.openChat(targetChannel); + await auxContext.poHomeChannel.sidebar.openChat(targetChannel); await auxContext.poHomeChannel.content.sendMessage('hello admin'); await expect(auxContext.poHomeChannel.content.lastUserMessage.getByRole('status', { name: 'Message sent' })).toBeVisible(); }); test('should show read receipts message viewed status in the sent message', async () => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await expect(poHomeChannel.content.lastUserMessage.getByRole('status', { name: 'Message viewed' })).toBeVisible(); }); test('should show the reads receipt modal with the users who read the message', async ({ page }) => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await poHomeChannel.content.openLastMessageMenu(); await page.locator('role=menuitem[name="Read receipts"]').click(); diff --git a/apps/meteor/tests/e2e/retention-policy.spec.ts b/apps/meteor/tests/e2e/retention-policy.spec.ts index 25962d2aae16..be8173b20b62 100644 --- a/apps/meteor/tests/e2e/retention-policy.spec.ts +++ b/apps/meteor/tests/e2e/retention-policy.spec.ts @@ -37,19 +37,19 @@ test.describe.serial('retention-policy', () => { }); test('should not show prune banner in channel', async () => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await expect(poHomeChannel.content.channelRetentionPolicyWarning).not.toBeVisible(); }); test('should not show prune banner in team', async () => { - await poHomeChannel.sidenav.openChat(targetTeam); + await poHomeChannel.sidebar.openChat(targetTeam); await expect(poHomeChannel.content.channelRetentionPolicyWarning).not.toBeVisible(); }); test('should not show prune section on edit channel', async () => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await poHomeChannel.tabs.btnRoomInfo.click(); await poHomeChannel.tabs.room.btnEdit.click(); @@ -70,21 +70,21 @@ test.describe.serial('retention-policy', () => { }); test('should not show prune banner even with retention policy setting enabled in any type of room', async () => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await expect(poHomeChannel.content.channelRetentionPolicyWarning).not.toBeVisible(); - await poHomeChannel.sidenav.openChat(targetTeam); + await poHomeChannel.sidebar.openChat(targetTeam); await expect(poHomeChannel.content.channelRetentionPolicyWarning).not.toBeVisible(); - await poHomeChannel.sidenav.openChat(targetGroup); + await poHomeChannel.sidebar.openChat(targetGroup); await expect(poHomeChannel.content.channelRetentionPolicyWarning).not.toBeVisible(); - await poHomeChannel.sidenav.openChat('user1'); + await poHomeChannel.sidebar.openChat('user1'); await expect(poHomeChannel.content.channelRetentionPolicyWarning).not.toBeVisible(); }); test('should show prune section in edit channel', async () => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await poHomeChannel.tabs.btnRoomInfo.click(); await poHomeChannel.tabs.room.btnEdit.click(); @@ -96,7 +96,7 @@ test.describe.serial('retention-policy', () => { test.beforeEach(async ({ browser }) => { const { page } = await createAuxContext(browser, Users.user1); auxContext = { page, poHomeChannel: new HomeChannel(page) }; - await auxContext.poHomeChannel.sidenav.openChat(targetChannel); + await auxContext.poHomeChannel.sidebar.openChat(targetChannel); await auxContext.poHomeChannel.tabs.btnRoomInfo.click(); await auxContext.poHomeChannel.tabs.room.btnEdit.click(); }); @@ -124,7 +124,7 @@ test.describe.serial('retention-policy', () => { }); test('should prune old messages checkbox enabled by default in channel and show retention policy banner', async () => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await expect(poHomeChannel.content.channelRetentionPolicyWarning).toBeVisible(); await poHomeChannel.tabs.btnRoomInfo.click(); @@ -134,7 +134,7 @@ test.describe.serial('retention-policy', () => { }); test('should prune old messages checkbox enabled by default in team and show retention policy banner', async () => { - await poHomeChannel.sidenav.openChat(targetTeam); + await poHomeChannel.sidebar.openChat(targetTeam); await expect(poHomeChannel.content.channelRetentionPolicyWarning).toBeVisible(); await poHomeChannel.tabs.btnRoomInfo.click(); @@ -144,7 +144,7 @@ test.describe.serial('retention-policy', () => { }); test('should prune old messages checkbox enabled by default in group and show retention policy banner', async () => { - await poHomeChannel.sidenav.openChat(targetGroup); + await poHomeChannel.sidebar.openChat(targetGroup); await expect(poHomeChannel.content.channelRetentionPolicyWarning).toBeVisible(); await poHomeChannel.tabs.btnRoomInfo.click(); @@ -154,7 +154,7 @@ test.describe.serial('retention-policy', () => { }); test('should show retention policy banner in DMs', async () => { - await poHomeChannel.sidenav.openChat('user1'); + await poHomeChannel.sidebar.openChat('user1'); await expect(poHomeChannel.content.channelRetentionPolicyWarning).toBeVisible(); }); }); @@ -168,7 +168,7 @@ test.describe.serial('retention-policy', () => { }); test.beforeEach(async () => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await poHomeChannel.tabs.btnRoomInfo.click(); await poHomeChannel.tabs.room.btnEdit.click(); await poHomeChannel.tabs.room.pruneAccordion.click(); diff --git a/apps/meteor/tests/e2e/search-discussion.spec.ts b/apps/meteor/tests/e2e/search-discussion.spec.ts index 0d645432d777..7e910a02ddb3 100644 --- a/apps/meteor/tests/e2e/search-discussion.spec.ts +++ b/apps/meteor/tests/e2e/search-discussion.spec.ts @@ -29,8 +29,7 @@ test.describe.serial('search-discussion', () => { }); const testDiscussionSearch = async (page: Page) => { - await poHomeChannel.sidenav.openSearch(); - await poHomeChannel.sidenav.inputSearch.type(discussionName); + await poHomeChannel.sidebar.typeSearch(discussionName); const targetSearchItem = page.locator('role=listbox').getByText(discussionName).first(); await expect(targetSearchItem).toBeVisible(); }; diff --git a/apps/meteor/tests/e2e/sidebar-administration-menu.spec.ts b/apps/meteor/tests/e2e/sidebar-administration-menu.spec.ts index e72149242e90..2171c9c8f51f 100644 --- a/apps/meteor/tests/e2e/sidebar-administration-menu.spec.ts +++ b/apps/meteor/tests/e2e/sidebar-administration-menu.spec.ts @@ -17,13 +17,15 @@ test.describe.serial('sidebar-administration-menu', () => { test.describe('admin user', () => { test('should open workspace page', async ({ page }) => { test.skip(!IS_EE, 'Enterprise only'); - await poHomeDiscussion.sidenav.openAdministrationByLabel('Workspace'); + await poHomeDiscussion.navbar.openWorkspaceSettingsMenu(); + await poHomeDiscussion.navbar.workspaceMenuItem.click(); await expect(page).toHaveURL('admin/info'); }); test('should open omnichannel page', async ({ page }) => { - await poHomeDiscussion.sidenav.openAdministrationByLabel('Omnichannel'); + await poHomeDiscussion.navbar.openWorkspaceSettingsMenu(); + await poHomeDiscussion.navbar.omnichannelMenuItem.click(); await expect(page).toHaveURL('omnichannel/current'); }); diff --git a/apps/meteor/tests/e2e/sidebar.spec.ts b/apps/meteor/tests/e2e/sidebar.spec.ts index a172fe72d1be..259f2f77c962 100644 --- a/apps/meteor/tests/e2e/sidebar.spec.ts +++ b/apps/meteor/tests/e2e/sidebar.spec.ts @@ -14,22 +14,21 @@ test.describe.serial('sidebar', () => { }); test('should navigate on sidebar toolbar using arrow keys', async ({ page }) => { - await poHomeDiscussion.sidenav.userProfileMenu.focus(); - await page.keyboard.press('Tab'); + await poHomeDiscussion.navbar.homeButton.focus(); await page.keyboard.press('ArrowRight'); - await expect(poHomeDiscussion.sidenav.sidebarToolbar.getByRole('button', { name: 'Search' })).toBeFocused(); + await expect(poHomeDiscussion.navbar.directoryButton).toBeFocused(); }); test('should navigate on sidebar items using arrow keys and restore focus', async ({ page }) => { // focus should be on the next item - await poHomeDiscussion.sidenav.sidebarChannelsList.getByRole('link').first().focus(); + await poHomeDiscussion.sidebar.channelsList.getByRole('link').first().focus(); await page.keyboard.press('ArrowDown'); - await expect(poHomeDiscussion.sidenav.sidebarChannelsList.getByRole('link').first()).not.toBeFocused(); + await expect(poHomeDiscussion.sidebar.channelsList.getByRole('link').first()).not.toBeFocused(); // shouldn't focus the first item await page.keyboard.press('Shift+Tab'); await page.keyboard.press('Tab'); - await expect(poHomeDiscussion.sidenav.sidebarChannelsList.getByRole('link').first()).not.toBeFocused(); + await expect(poHomeDiscussion.sidebar.channelsList.getByRole('link').first()).not.toBeFocused(); }); }); diff --git a/apps/meteor/tests/e2e/system-messages.spec.ts b/apps/meteor/tests/e2e/system-messages.spec.ts index b4820ab25ac7..4591bd1e7cb9 100644 --- a/apps/meteor/tests/e2e/system-messages.spec.ts +++ b/apps/meteor/tests/e2e/system-messages.spec.ts @@ -48,7 +48,7 @@ test.describe.serial('System Messages', () => { return; } - await poHomeChannel.sidenav.openChat(group.name); + await poHomeChannel.sidebar.openChat(group.name); }); test.afterAll(async ({ api }) => { diff --git a/apps/meteor/tests/e2e/threads.spec.ts b/apps/meteor/tests/e2e/threads.spec.ts index 2de7c53ba48a..6b67a034be08 100644 --- a/apps/meteor/tests/e2e/threads.spec.ts +++ b/apps/meteor/tests/e2e/threads.spec.ts @@ -13,7 +13,7 @@ test.describe.serial('Threads', () => { test.beforeEach(async ({ page }) => { poHomeChannel = new HomeChannel(page); await page.goto('/home'); - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); }); test('expect thread message preview if alsoSendToChannel checkbox is checked', async ({ page }) => { await poHomeChannel.content.sendMessage('this is a message for reply'); @@ -85,7 +85,7 @@ test.describe.serial('Threads', () => { test.beforeEach(async ({ page }) => { poHomeChannel = new HomeChannel(page); await page.goto('/home'); - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await poHomeChannel.content.sendMessage('this is a message for reply'); await page.locator('[data-qa-type="message"]').last().hover(); await page.locator('role=button[name="Reply in thread"]').click(); diff --git a/apps/meteor/tests/e2e/user-card-info-actions-by-member.spec.ts b/apps/meteor/tests/e2e/user-card-info-actions-by-member.spec.ts index b664f2c9ee69..e4afb743e580 100644 --- a/apps/meteor/tests/e2e/user-card-info-actions-by-member.spec.ts +++ b/apps/meteor/tests/e2e/user-card-info-actions-by-member.spec.ts @@ -27,7 +27,7 @@ test.describe.parallel('Mention User Card [To Member]', () => { test.afterAll(({ api }) => deleteChannel(api, targetChannel)); test('should show correct userinfo actions for a member of the room to a non-privileged member', async ({ page }) => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); const mentionSpan = page.locator(`span[title="Mentions user"][data-uid="${Users.user1.data.username}"]`); await mentionSpan.click(); @@ -58,7 +58,7 @@ test.describe.parallel('Mention User Card [To Member]', () => { }); test('should show correct userinfo actions for a non-member of the room to a non-privileged member', async ({ page }) => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); const mentionSpan = page.locator(`span[title="Mentions user"][data-uid="${Users.user2.data.username}"]`); await mentionSpan.click(); diff --git a/apps/meteor/tests/e2e/user-card-info-actions-by-room-owner.spec.ts b/apps/meteor/tests/e2e/user-card-info-actions-by-room-owner.spec.ts index 808acbb79bbd..5cf0c0cd21b7 100644 --- a/apps/meteor/tests/e2e/user-card-info-actions-by-room-owner.spec.ts +++ b/apps/meteor/tests/e2e/user-card-info-actions-by-room-owner.spec.ts @@ -26,7 +26,7 @@ test.describe.parallel('Mention User Card [To Room Owner]', () => { test.afterAll(({ api }) => deleteChannel(api, targetChannel)); test('should show correct userinfo actions for a member of the room to the room owner', async ({ page }) => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); const mentionSpan = page.locator(`span[title="Mentions user"][data-uid="${Users.user1.data.username}"]`); await mentionSpan.click(); @@ -58,7 +58,7 @@ test.describe.parallel('Mention User Card [To Room Owner]', () => { }); test('should show correct userinfo actions for a non-member of the room to the room owner', async ({ page }) => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); const mentionSpan = page.locator(`span[title="Mentions user"][data-uid="${Users.user2.data.username}"]`); await mentionSpan.click(); diff --git a/apps/meteor/tests/e2e/video-conference-ring.spec.ts b/apps/meteor/tests/e2e/video-conference-ring.spec.ts index 0b26c16cffc6..52d1e711a909 100644 --- a/apps/meteor/tests/e2e/video-conference-ring.spec.ts +++ b/apps/meteor/tests/e2e/video-conference-ring.spec.ts @@ -30,9 +30,9 @@ test.describe('video conference ringing', () => { }); test('expect is ringing in direct', async () => { - await poHomeChannel.sidenav.openChat('user2'); + await poHomeChannel.sidebar.openChat('user2'); - await auxContext.poHomeChannel.sidenav.openChat('user1'); + await auxContext.poHomeChannel.sidebar.openChat('user1'); await poHomeChannel.content.btnCall.click(); await poHomeChannel.content.menuItemVideoCall.click(); await poHomeChannel.content.btnStartVideoCall.click(); diff --git a/apps/meteor/tests/e2e/video-conference.spec.ts b/apps/meteor/tests/e2e/video-conference.spec.ts index 36f10fddbff4..f87cf7680739 100644 --- a/apps/meteor/tests/e2e/video-conference.spec.ts +++ b/apps/meteor/tests/e2e/video-conference.spec.ts @@ -27,7 +27,7 @@ test.describe('video conference', () => { }); test('expect create video conference in a "targetChannel"', async () => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await poHomeChannel.content.btnCall.click(); await poHomeChannel.content.menuItemVideoCall.click(); @@ -38,13 +38,13 @@ test.describe('video conference', () => { test.describe('test received in a "target channel"', async () => { test.use({ storageState: Users.user2.state }); test('verify if user received a invite call from "targetChannel"', async () => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await expect(poHomeChannel.content.videoConfMessageBlock.last()).toBeVisible(); }); }); test('expect create video conference in a direct', async () => { - await poHomeChannel.sidenav.openChat('user2'); + await poHomeChannel.sidebar.openChat('user2'); await poHomeChannel.content.btnCall.click(); await poHomeChannel.content.menuItemVideoCall.click(); @@ -55,13 +55,13 @@ test.describe('video conference', () => { test.describe('verify if user received from a direct', async () => { test.use({ storageState: Users.user2.state }); test('verify if user received a call invite in direct', async () => { - await poHomeChannel.sidenav.openChat('user1'); + await poHomeChannel.sidebar.openChat('user1'); await expect(poHomeChannel.content.videoConfMessageBlock.last()).toBeVisible(); }); }); test('expect create video conference in a "targetTeam"', async () => { - await poHomeChannel.sidenav.openChat(targetTeam); + await poHomeChannel.sidebar.openChat(targetTeam); await poHomeChannel.content.btnCall.click(); await poHomeChannel.content.menuItemVideoCall.click(); @@ -72,13 +72,13 @@ test.describe('video conference', () => { test.describe('verify if received from a "targetTeam"', async () => { test.use({ storageState: Users.user2.state }); test('verify if user received from a "targetTeam"', async () => { - await poHomeChannel.sidenav.openChat(targetTeam); + await poHomeChannel.sidebar.openChat(targetTeam); await expect(poHomeChannel.content.videoConfMessageBlock.last()).toBeVisible(); }); }); test('expect create video conference in a direct multiple', async () => { - await poHomeChannel.sidenav.openChat('rocketchat.internal.admin.test, user2'); + await poHomeChannel.sidebar.openChat('rocketchat.internal.admin.test, user2'); await poHomeChannel.content.btnCall.click(); await poHomeChannel.content.menuItemVideoCall.click(); @@ -89,13 +89,13 @@ test.describe('video conference', () => { test.describe('received in a direct multiple', async () => { test.use({ storageState: Users.user2.state }); test('verify if user received from a multiple', async () => { - await poHomeChannel.sidenav.openChat('rocketchat.internal.admin.test, user1'); + await poHomeChannel.sidebar.openChat('rocketchat.internal.admin.test, user1'); await expect(poHomeChannel.content.videoConfMessageBlock.last()).toBeVisible(); }); }); test('expect create video conference not available in a "targetReadOnlyChannel"', async () => { - await poHomeChannel.sidenav.openChat(targetReadOnlyChannel); + await poHomeChannel.sidebar.openChat(targetReadOnlyChannel); await expect(poHomeChannel.content.btnCall).hasAttribute('disabled'); }); From bb606f1364fe137cde95de1c18e5b97dcf429a67 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Thu, 5 Dec 2024 10:55:22 -0300 Subject: [PATCH 13/24] test: replace omnichannel test fragments --- .../meteor/tests/e2e/message-mentions.spec.ts | 2 +- ...nichannel-auto-onhold-chat-closing.spec.ts | 4 +- ...nnel-auto-transfer-unanswered-chat.spec.ts | 10 ++-- ...nichannel-canned-responses-sidebar.spec.ts | 4 +- ...nel-changing-room-priority-and-sla.spec.ts | 4 +- .../omnichannel-chat-history.spec.ts | 8 ++-- .../omnichannel-chat-transfers.spec.ts | 48 +++++++++---------- .../omnichannel-close-chat.spec.ts | 6 +-- .../omnichannel-close-inquiry.spec.ts | 5 +- .../omnichannel-contact-info.spec.ts | 4 +- .../omnichannel-livechat-api.spec.ts | 30 ++++++------ ...channel-livechat-avatar-visibility.spec.ts | 4 +- .../omnichannel-livechat-department.spec.ts | 6 +-- ...nnel-livechat-message-bubble-color.spec.ts | 4 +- ...hat-queue-management-autoselection.spec.ts | 4 +- ...ichannel-livechat-queue-management.spec.ts | 2 +- .../omnichannel/omnichannel-livechat.spec.ts | 12 ++--- ...mnichannel-manual-selection-logout.spec.ts | 8 ++-- .../omnichannel-manual-selection.spec.ts | 28 +++++------ .../omnichannel-priorities-sidebar.spec.ts | 14 +++--- .../omnichannel-send-pdf-transcript.spec.ts | 4 +- .../omnichannel-send-transcript.spec.ts | 2 +- .../omnichannel/omnichannel-takeChat.spec.ts | 20 ++++---- ...channel-transfer-to-another-agents.spec.ts | 14 +++--- .../fragments/create-room-modal.ts | 4 ++ .../e2e/page-objects/fragments/navbar.ts | 12 +++-- .../e2e/page-objects/fragments/sidebar.ts | 10 ++-- .../page-objects/omnichannel-transcript.ts | 2 +- 28 files changed, 142 insertions(+), 133 deletions(-) diff --git a/apps/meteor/tests/e2e/message-mentions.spec.ts b/apps/meteor/tests/e2e/message-mentions.spec.ts index 8340d241b19a..88c33271dfad 100644 --- a/apps/meteor/tests/e2e/message-mentions.spec.ts +++ b/apps/meteor/tests/e2e/message-mentions.spec.ts @@ -113,7 +113,7 @@ test.describe.serial('message-mentions', () => { await page.goto('/home'); }); - test.only('expect show "all" and "here" options', async () => { + test('expect show "all" and "here" options', async () => { await poHomeChannel.sidebar.openChat('general'); await poHomeChannel.content.typeMessage('@'); diff --git a/apps/meteor/tests/e2e/omnichannel/omnichannel-auto-onhold-chat-closing.spec.ts b/apps/meteor/tests/e2e/omnichannel/omnichannel-auto-onhold-chat-closing.spec.ts index 255ac0d3ed09..b227258fae70 100644 --- a/apps/meteor/tests/e2e/omnichannel/omnichannel-auto-onhold-chat-closing.spec.ts +++ b/apps/meteor/tests/e2e/omnichannel/omnichannel-auto-onhold-chat-closing.spec.ts @@ -38,7 +38,7 @@ test.describe('omnichannel-auto-onhold-chat-closing', () => { test.beforeEach(async ({ page, api }) => { // make "user-1" online - await agent.poHomeChannel.sidenav.switchStatus('online'); + await agent.poHomeChannel.navbar.switchStatus('online'); // start a new chat for each test newVisitor = createFakeVisitor(); @@ -53,7 +53,7 @@ test.describe('omnichannel-auto-onhold-chat-closing', () => { // Note: Skipping this test as the scheduler is gonna take 1 minute to process now // And waiting for 1 minute in a test is horrible test.skip('expect on-hold chat to be closed automatically in 5 seconds', async () => { - await agent.poHomeChannel.sidenav.openChat(newVisitor.name); + await agent.poHomeChannel.sidebar.openChat(newVisitor.name); await agent.poHomeChannel.content.sendMessage('this_is_a_test_message_from_agent'); await agent.poHomeChannel.content.btnOnHold.click(); diff --git a/apps/meteor/tests/e2e/omnichannel/omnichannel-auto-transfer-unanswered-chat.spec.ts b/apps/meteor/tests/e2e/omnichannel/omnichannel-auto-transfer-unanswered-chat.spec.ts index 285fdaef828a..7c26061f9c69 100644 --- a/apps/meteor/tests/e2e/omnichannel/omnichannel-auto-transfer-unanswered-chat.spec.ts +++ b/apps/meteor/tests/e2e/omnichannel/omnichannel-auto-transfer-unanswered-chat.spec.ts @@ -44,8 +44,8 @@ test.describe('omnichannel-auto-transfer-unanswered-chat', () => { test.beforeEach(async ({ page, api }) => { // make "user-1" online - await agent1.poHomeChannel.sidenav.switchOmnichannelStatus('online'); - await agent2.poHomeChannel.sidenav.switchOmnichannelStatus('offline'); + await agent1.poHomeChannel.navbar.switchOmnichannelStatus('online'); + await agent2.poHomeChannel.navbar.switchOmnichannelStatus('offline'); // start a new chat for each test newVisitor = createFakeVisitor(); @@ -58,13 +58,13 @@ test.describe('omnichannel-auto-transfer-unanswered-chat', () => { }); test('expect chat to be auto transferred to next agent within 5 seconds of no reply from first agent', async () => { - await agent1.poHomeChannel.sidenav.openChat(newVisitor.name); + await agent1.poHomeChannel.sidebar.openChat(newVisitor.name); - await agent2.poHomeChannel.sidenav.switchOmnichannelStatus('online'); + await agent2.poHomeChannel.navbar.switchOmnichannelStatus('online'); // wait for the chat to be closed automatically for 5 seconds await agent1.page.waitForTimeout(7000); - await agent2.poHomeChannel.sidenav.openChat(newVisitor.name); + await agent2.poHomeChannel.sidebar.openChat(newVisitor.name); }); }); diff --git a/apps/meteor/tests/e2e/omnichannel/omnichannel-canned-responses-sidebar.spec.ts b/apps/meteor/tests/e2e/omnichannel/omnichannel-canned-responses-sidebar.spec.ts index 8d3c3a4283f2..f98b923c7f1f 100644 --- a/apps/meteor/tests/e2e/omnichannel/omnichannel-canned-responses-sidebar.spec.ts +++ b/apps/meteor/tests/e2e/omnichannel/omnichannel-canned-responses-sidebar.spec.ts @@ -40,12 +40,12 @@ test.describe('Omnichannel Canned Responses Sidebar', () => { await page.goto('/livechat'); await poLiveChat.openLiveChat(); await poLiveChat.sendMessage(newVisitor, false); - await poLiveChat.onlineAgentMessage.type('this_a_test_message_from_visitor'); + await poLiveChat.onlineAgentMessage.fill('this_a_test_message_from_visitor'); await poLiveChat.btnSendMessageToOnlineAgent.click(); }); await test.step('Expect to have 1 omnichannel assigned to agent 1', async () => { - await agent.poHomeChannel.sidenav.openChat(newVisitor.name); + await agent.poHomeChannel.sidebar.openChat(newVisitor.name); }); await test.step('Expect to be able to open canned responses sidebar and creation', async () => { diff --git a/apps/meteor/tests/e2e/omnichannel/omnichannel-changing-room-priority-and-sla.spec.ts b/apps/meteor/tests/e2e/omnichannel/omnichannel-changing-room-priority-and-sla.spec.ts index ee32eb4efe0d..8399f1b8e317 100644 --- a/apps/meteor/tests/e2e/omnichannel/omnichannel-changing-room-priority-and-sla.spec.ts +++ b/apps/meteor/tests/e2e/omnichannel/omnichannel-changing-room-priority-and-sla.spec.ts @@ -41,7 +41,7 @@ test.describe.serial('omnichannel-changing-room-priority-and-sla', () => { const { page } = await createAuxContext(browser, Users.admin); agent = { page, poHomeChannel: new HomeChannel(page) }; - await agent.poHomeChannel.sidenav.switchStatus('online'); + await agent.poHomeChannel.navbar.switchStatus('online'); }); test.afterAll(async ({ api }) => { @@ -63,7 +63,7 @@ test.describe.serial('omnichannel-changing-room-priority-and-sla', () => { await poLiveChat.onlineAgentMessage.type('this_a_test_message_from_user'); await poLiveChat.btnSendMessageToOnlineAgent.click(); - await agent.poHomeChannel.sidenav.getQueuedChat(newVisitor.name).click(); + await agent.poHomeChannel.sidebar.getQueuedChat(newVisitor.name).click(); }); test('expect to change priority of room and corresponding system message should be displayed', async ({ api }) => { diff --git a/apps/meteor/tests/e2e/omnichannel/omnichannel-chat-history.spec.ts b/apps/meteor/tests/e2e/omnichannel/omnichannel-chat-history.spec.ts index e718cc0a5e44..92f6506c55c6 100644 --- a/apps/meteor/tests/e2e/omnichannel/omnichannel-chat-history.spec.ts +++ b/apps/meteor/tests/e2e/omnichannel/omnichannel-chat-history.spec.ts @@ -38,17 +38,17 @@ test.describe('Omnichannel chat history', () => { await page.goto('/livechat'); await poLiveChat.openLiveChat(); await poLiveChat.sendMessage(newVisitor, false); - await poLiveChat.onlineAgentMessage.type('this_a_test_message_from_visitor'); + await poLiveChat.onlineAgentMessage.fill('this_a_test_message_from_visitor'); await poLiveChat.btnSendMessageToOnlineAgent.click(); }); await test.step('Expect to have 1 omnichannel assigned to agent 1', async () => { - await agent.poHomeOmnichannel.sidenav.openChat(newVisitor.name); + await agent.poHomeOmnichannel.sidebar.openChat(newVisitor.name); }); await test.step('Expect to be able to close an omnichannel to conversation', async () => { await agent.poHomeOmnichannel.content.btnCloseChat.click(); - await agent.poHomeOmnichannel.content.inputModalClosingComment.type('any_comment'); + await agent.poHomeOmnichannel.content.inputModalClosingComment.fill('any_comment'); await agent.poHomeOmnichannel.content.btnModalConfirm.click(); await expect(agent.poHomeOmnichannel.toastSuccess).toBeVisible(); }); @@ -61,7 +61,7 @@ test.describe('Omnichannel chat history', () => { }); await test.step('Expect to have 1 omnichannel assigned to agent 1', async () => { - await agent.poHomeOmnichannel.sidenav.openChat(newVisitor.name); + await agent.poHomeOmnichannel.sidebar.openChat(newVisitor.name); }); await test.step('Expect to be able to see conversation history', async () => { diff --git a/apps/meteor/tests/e2e/omnichannel/omnichannel-chat-transfers.spec.ts b/apps/meteor/tests/e2e/omnichannel/omnichannel-chat-transfers.spec.ts index 101308ef0b6a..376a7a72c135 100644 --- a/apps/meteor/tests/e2e/omnichannel/omnichannel-chat-transfers.spec.ts +++ b/apps/meteor/tests/e2e/omnichannel/omnichannel-chat-transfers.spec.ts @@ -132,7 +132,7 @@ test.describe('OC - Chat transfers [Monitor role]', () => { const [agentA, agentB] = sessions; await test.step('expect room a to bot be visible for user2', async () => { - await expect(agentB.poHomeOmnichannel.sidenav.getSidebarItemByName(roomA.fname)).not.toBeVisible(); + await expect(agentB.poHomeOmnichannel.sidebar.getSidebarItemByName(roomA.fname)).not.toBeVisible(); }); await test.step('expect to be able to join chats from same unit', async () => { @@ -157,12 +157,12 @@ test.describe('OC - Chat transfers [Monitor role]', () => { await test.step('expect conversation to have been assigned to user 2', async () => { await expect(agentA.page).toHaveURL(`/home`); - await expect(agentA.poHomeOmnichannel.sidenav.getSidebarItemByName(roomA.fname)).not.toBeVisible(); - await expect(agentB.poHomeOmnichannel.sidenav.getSidebarItemByName(roomA.fname)).toBeVisible(); + await expect(agentA.poHomeOmnichannel.sidebar.getSidebarItemByName(roomA.fname)).not.toBeVisible(); + await expect(agentB.poHomeOmnichannel.sidebar.getSidebarItemByName(roomA.fname)).toBeVisible(); }); await test.step('expect user 1 to have left the conversation', async () => { - await agentB.poHomeOmnichannel.sidenav.getSidebarItemByName(roomA.fname).click(); + await agentB.poHomeOmnichannel.sidebar.getSidebarItemByName(roomA.fname).click(); await agentB.poHomeOmnichannel.content.findSystemMessage( `Transfer: user3 transferred the chat to the department ${departmentB.name}}`, ); @@ -175,7 +175,7 @@ test.describe('OC - Chat transfers [Monitor role]', () => { const [agentA, agentB] = sessions; await test.step('expect room a to bot be visible for user2', async () => { - await expect(agentB.poHomeOmnichannel.sidenav.getSidebarItemByName(roomB.fname)).not.toBeVisible(); + await expect(agentB.poHomeOmnichannel.sidebar.getSidebarItemByName(roomB.fname)).not.toBeVisible(); }); await test.step('expect to be able to join chats from same unit', async () => { @@ -200,12 +200,12 @@ test.describe('OC - Chat transfers [Monitor role]', () => { await test.step('expect conversation to have been assigned to user 2', async () => { await expect(agentA.page).toHaveURL(`/home`); - await expect(agentA.poHomeOmnichannel.sidenav.getSidebarItemByName(roomB.fname)).not.toBeVisible(); - await expect(agentB.poHomeOmnichannel.sidenav.getSidebarItemByName(roomB.fname)).toBeVisible(); + await expect(agentA.poHomeOmnichannel.sidebar.getSidebarItemByName(roomB.fname)).not.toBeVisible(); + await expect(agentB.poHomeOmnichannel.sidebar.getSidebarItemByName(roomB.fname)).toBeVisible(); }); await test.step('expect user 1 to have left the conversation', async () => { - await agentB.poHomeOmnichannel.sidenav.getSidebarItemByName(roomB.fname).click(); + await agentB.poHomeOmnichannel.sidebar.getSidebarItemByName(roomB.fname).click(); await expect( agentB.poHomeOmnichannel.content.findSystemMessage( `New Chat Transfer: user3 transferred the chat to user2 with a comment: any_comment`, @@ -220,7 +220,7 @@ test.describe('OC - Chat transfers [Monitor role]', () => { const [agentA, , agentC] = sessions; await test.step('expect room a to bot be visible for user2', async () => { - await expect(agentC.poHomeOmnichannel.sidenav.getSidebarItemByName(roomC.fname)).not.toBeVisible(); + await expect(agentC.poHomeOmnichannel.sidebar.getSidebarItemByName(roomC.fname)).not.toBeVisible(); }); await test.step('expect to be able to join chats from same unit', async () => { @@ -245,12 +245,12 @@ test.describe('OC - Chat transfers [Monitor role]', () => { await test.step('expect conversation to have been assigned to user 2', async () => { await expect(agentA.page).toHaveURL(`/home`); - await expect(agentA.poHomeOmnichannel.sidenav.getSidebarItemByName(roomC.fname)).not.toBeVisible(); - await expect(agentC.poHomeOmnichannel.sidenav.getSidebarItemByName(roomC.fname)).toBeVisible(); + await expect(agentA.poHomeOmnichannel.sidebar.getSidebarItemByName(roomC.fname)).not.toBeVisible(); + await expect(agentC.poHomeOmnichannel.sidebar.getSidebarItemByName(roomC.fname)).toBeVisible(); }); await test.step('expect user 1 to have left the conversation', async () => { - await agentC.poHomeOmnichannel.sidenav.getSidebarItemByName(roomC.fname).click(); + await agentC.poHomeOmnichannel.sidebar.getSidebarItemByName(roomC.fname).click(); await expect( agentC.poHomeOmnichannel.content.findSystemMessage( `New Chat Transfer: user3 transferred the chat to RocketChat Internal Admin Test with a comment: any_comment`, @@ -357,7 +357,7 @@ test.describe('OC - Chat transfers [Manager role]', () => { const [agentA, agentB] = sessions; await test.step('expect room a to bot be visible for user2', async () => { - await expect(agentB.poHomeOmnichannel.sidenav.getSidebarItemByName(roomA.fname)).not.toBeVisible(); + await expect(agentB.poHomeOmnichannel.sidebar.getSidebarItemByName(roomA.fname)).not.toBeVisible(); }); await test.step('expect to be able to join chats from same unit', async () => { @@ -382,12 +382,12 @@ test.describe('OC - Chat transfers [Manager role]', () => { await test.step('expect conversation to have been assigned to user 2', async () => { await expect(agentA.page).toHaveURL(`/home`); - await expect(agentA.poHomeOmnichannel.sidenav.getSidebarItemByName(roomA.fname)).not.toBeVisible(); - await expect(agentB.poHomeOmnichannel.sidenav.getSidebarItemByName(roomA.fname)).toBeVisible(); + await expect(agentA.poHomeOmnichannel.sidebar.getSidebarItemByName(roomA.fname)).not.toBeVisible(); + await expect(agentB.poHomeOmnichannel.sidebar.getSidebarItemByName(roomA.fname)).toBeVisible(); }); await test.step('expect user 1 to have left the conversation', async () => { - await agentB.poHomeOmnichannel.sidenav.getSidebarItemByName(roomA.fname).click(); + await agentB.poHomeOmnichannel.sidebar.getSidebarItemByName(roomA.fname).click(); await agentB.poHomeOmnichannel.content.findSystemMessage( `Transfer: user3 transferred the chat to the department ${departmentB.name}}`, ); @@ -400,7 +400,7 @@ test.describe('OC - Chat transfers [Manager role]', () => { const [agentA, agentB] = sessions; await test.step('expect room a to bot be visible for user2', async () => { - await expect(agentB.poHomeOmnichannel.sidenav.getSidebarItemByName(roomB.fname)).not.toBeVisible(); + await expect(agentB.poHomeOmnichannel.sidebar.getSidebarItemByName(roomB.fname)).not.toBeVisible(); }); await test.step('expect to be able to join chats from same unit', async () => { @@ -425,12 +425,12 @@ test.describe('OC - Chat transfers [Manager role]', () => { await test.step('expect conversation to have been assigned to user 2', async () => { await expect(agentA.page).toHaveURL(`/home`); - await expect(agentA.poHomeOmnichannel.sidenav.getSidebarItemByName(roomB.fname)).not.toBeVisible(); - await expect(agentB.poHomeOmnichannel.sidenav.getSidebarItemByName(roomB.fname)).toBeVisible(); + await expect(agentA.poHomeOmnichannel.sidebar.getSidebarItemByName(roomB.fname)).not.toBeVisible(); + await expect(agentB.poHomeOmnichannel.sidebar.getSidebarItemByName(roomB.fname)).toBeVisible(); }); await test.step('expect user 1 to have left the conversation', async () => { - await agentB.poHomeOmnichannel.sidenav.getSidebarItemByName(roomB.fname).click(); + await agentB.poHomeOmnichannel.sidebar.getSidebarItemByName(roomB.fname).click(); await expect( agentB.poHomeOmnichannel.content.findSystemMessage( `New Chat Transfer: user3 transferred the chat to user2 with a comment: any_comment`, @@ -445,7 +445,7 @@ test.describe('OC - Chat transfers [Manager role]', () => { const [agentA, , agentC] = sessions; await test.step('expect room a to bot be visible for user2', async () => { - await expect(agentC.poHomeOmnichannel.sidenav.getSidebarItemByName(roomC.fname)).not.toBeVisible(); + await expect(agentC.poHomeOmnichannel.sidebar.getSidebarItemByName(roomC.fname)).not.toBeVisible(); }); await test.step('expect to be able to join chats from same unit', async () => { @@ -470,12 +470,12 @@ test.describe('OC - Chat transfers [Manager role]', () => { await test.step('expect conversation to have been assigned to user 2', async () => { await expect(agentA.page).toHaveURL(`/home`); - await expect(agentA.poHomeOmnichannel.sidenav.getSidebarItemByName(roomC.fname)).not.toBeVisible(); - await expect(agentC.poHomeOmnichannel.sidenav.getSidebarItemByName(roomC.fname)).toBeVisible(); + await expect(agentA.poHomeOmnichannel.sidebar.getSidebarItemByName(roomC.fname)).not.toBeVisible(); + await expect(agentC.poHomeOmnichannel.sidebar.getSidebarItemByName(roomC.fname)).toBeVisible(); }); await test.step('expect user 1 to have left the conversation', async () => { - await agentC.poHomeOmnichannel.sidenav.getSidebarItemByName(roomC.fname).click(); + await agentC.poHomeOmnichannel.sidebar.getSidebarItemByName(roomC.fname).click(); await expect( agentC.poHomeOmnichannel.content.findSystemMessage( `New Chat Transfer: user3 transferred the chat to RocketChat Internal Admin Test with a comment: any_comment`, diff --git a/apps/meteor/tests/e2e/omnichannel/omnichannel-close-chat.spec.ts b/apps/meteor/tests/e2e/omnichannel/omnichannel-close-chat.spec.ts index b17842afd969..d3bfcaf81820 100644 --- a/apps/meteor/tests/e2e/omnichannel/omnichannel-close-chat.spec.ts +++ b/apps/meteor/tests/e2e/omnichannel/omnichannel-close-chat.spec.ts @@ -37,17 +37,17 @@ test.describe('Omnichannel close chat', () => { await page.goto('/livechat'); await poLiveChat.openLiveChat(); await poLiveChat.sendMessage(newVisitor, false); - await poLiveChat.onlineAgentMessage.type('this_a_test_message_from_visitor'); + await poLiveChat.onlineAgentMessage.fill('this_a_test_message_from_visitor'); await poLiveChat.btnSendMessageToOnlineAgent.click(); }); await test.step('Expect to have 1 omnichannel assigned to agent 1', async () => { - await agent.poHomeOmnichannel.sidenav.openChat(newVisitor.name); + await agent.poHomeOmnichannel.sidebar.openChat(newVisitor.name); }); await test.step('Expect to be able to close an omnichannel to conversation', async () => { await agent.poHomeOmnichannel.content.btnCloseChat.click(); - await agent.poHomeOmnichannel.content.inputModalClosingComment.type('any_comment'); + await agent.poHomeOmnichannel.content.inputModalClosingComment.fill('any_comment'); await agent.poHomeOmnichannel.content.btnModalConfirm.click(); await expect(agent.poHomeOmnichannel.toastSuccess).toBeVisible(); }); diff --git a/apps/meteor/tests/e2e/omnichannel/omnichannel-close-inquiry.spec.ts b/apps/meteor/tests/e2e/omnichannel/omnichannel-close-inquiry.spec.ts index b37a34ba861e..aded29072204 100644 --- a/apps/meteor/tests/e2e/omnichannel/omnichannel-close-inquiry.spec.ts +++ b/apps/meteor/tests/e2e/omnichannel/omnichannel-close-inquiry.spec.ts @@ -49,7 +49,7 @@ test.describe('Omnichannel close inquiry', () => { }); await test.step('Expect to have 1 omnichannel assigned to agent 1', async () => { - await agent.poHomeOmnichannel.sidenav.getQueuedChat(newVisitor.name).click(); + await agent.poHomeOmnichannel.sidebar.getQueuedChat(newVisitor.name).click(); await expect(agent.poHomeOmnichannel.content.btnTakeChat).toBeVisible(); }); @@ -61,7 +61,8 @@ test.describe('Omnichannel close inquiry', () => { }); await test.step('Expect to inquiry be closed when navigate back', async () => { - await agent.poHomeOmnichannel.sidenav.openAdministrationByLabel('Omnichannel'); + await agent.poHomeOmnichannel.navbar.openWorkspaceSettingsMenu(); + await agent.poHomeOmnichannel.navbar.omnichannelMenuItem.click(); await agent.poHomeOmnichannel.omnisidenav.linkCurrentChats.click(); await agent.poHomeOmnichannel.currentChats.findRowByName(newVisitor.name).click(); await expect(agent.poHomeOmnichannel.content.btnTakeChat).not.toBeVisible(); diff --git a/apps/meteor/tests/e2e/omnichannel/omnichannel-contact-info.spec.ts b/apps/meteor/tests/e2e/omnichannel/omnichannel-contact-info.spec.ts index 7d06da790bcf..fbd1ae910f0f 100644 --- a/apps/meteor/tests/e2e/omnichannel/omnichannel-contact-info.spec.ts +++ b/apps/meteor/tests/e2e/omnichannel/omnichannel-contact-info.spec.ts @@ -43,7 +43,7 @@ test.describe('Omnichannel contact info', () => { }); await test.step('Expect to have 1 omnichannel assigned to agent 1', async () => { - await agent.poHomeChannel.sidenav.openChat(newVisitor.name); + await agent.poHomeChannel.sidebar.openChat(newVisitor.name); }); await test.step('Expect to be able to see contact information and edit', async () => { @@ -54,7 +54,7 @@ test.describe('Omnichannel contact info', () => { await test.step('Expect to update room name and subscription when updating contact name', async () => { await agent.poContacts.newContact.inputName.fill('Edited Contact Name'); await agent.poContacts.newContact.btnSave.click(); - await expect(agent.poHomeChannel.sidenav.sidebarChannelsList.getByText('Edited Contact Name')).toBeVisible(); + await expect(agent.poHomeChannel.sidebar.channelsList.getByText('Edited Contact Name')).toBeVisible(); await expect(agent.poHomeChannel.content.channelHeader.getByText('Edited Contact Name')).toBeVisible(); }); }); diff --git a/apps/meteor/tests/e2e/omnichannel/omnichannel-livechat-api.spec.ts b/apps/meteor/tests/e2e/omnichannel/omnichannel-livechat-api.spec.ts index e14e3b43fbe3..3daaa540402a 100644 --- a/apps/meteor/tests/e2e/omnichannel/omnichannel-livechat-api.spec.ts +++ b/apps/meteor/tests/e2e/omnichannel/omnichannel-livechat-api.spec.ts @@ -245,9 +245,9 @@ test.describe('OC - Livechat API', () => { // This is needed since the livechat will not react to online/offline status changes if already loaded in a page if (testInfo.title === 'Expect onOfflineFormSubmit to trigger callback') { - await poAuxContext.poHomeOmnichannel.sidenav.switchStatus('offline'); + await poAuxContext.poHomeOmnichannel.navbar.switchStatus('offline'); } else { - await poAuxContext.poHomeOmnichannel.sidenav.switchStatus('online'); + await poAuxContext.poHomeOmnichannel.navbar.switchStatus('online'); } await page.goto('/packages/rocketchat_livechat/assets/demo.html'); @@ -346,7 +346,7 @@ test.describe('OC - Livechat API', () => { await poLiveChat.btnSendMessageToOnlineAgent.click(); await test.step('Expect registered guest to be in dep1', async () => { - await poAuxContext.poHomeOmnichannel.sidenav.openChat(registerGuestVisitor.name); + await poAuxContext.poHomeOmnichannel.sidebar.openChat(registerGuestVisitor.name); await expect(poAuxContext.poHomeOmnichannel.content.channelHeader).toContainText(registerGuestVisitor.name); }); @@ -363,7 +363,7 @@ test.describe('OC - Livechat API', () => { }); await test.step('Expect registered guest to still be in dep1', async () => { - await poAuxContext.poHomeOmnichannel.sidenav.openChat(registerGuestVisitor.name); + await poAuxContext.poHomeOmnichannel.sidebar.openChat(registerGuestVisitor.name); await expect(poAuxContext.poHomeOmnichannel.content.channelHeader).toContainText(registerGuestVisitor.name); }); }); @@ -437,7 +437,7 @@ test.describe('OC - Livechat API', () => { await poLiveChat.btnSendMessageToOnlineAgent.click(); await test.step('Expect registered guest to be in dep1', async () => { - await poAuxContext.poHomeOmnichannel.sidenav.openChat(registerGuestVisitor.name); + await poAuxContext.poHomeOmnichannel.sidebar.openChat(registerGuestVisitor.name); await expect(poAuxContext.poHomeOmnichannel.content.channelHeader).toContainText(registerGuestVisitor.name); }); @@ -474,7 +474,7 @@ test.describe('OC - Livechat API', () => { }); await test.step('Expect registered guest to have valid info', async () => { - await poAuxContext.poHomeOmnichannel.sidenav.openChat(registerGuestVisitor.name); + await poAuxContext.poHomeOmnichannel.sidebar.openChat(registerGuestVisitor.name); await poAuxContext.poHomeOmnichannel.content.btnGuestInfo.click(); // For some reason the guest info email information is being set to lowercase @@ -520,7 +520,7 @@ test.describe('OC - Livechat API', () => { await expect(poLiveChat.txtChatMessage('this_a_test_message_from_visitor_1')).toBeVisible(); - await poAuxContext.poHomeOmnichannel.sidenav.openChat(registerGuestVisitor1.name); + await poAuxContext.poHomeOmnichannel.sidebar.openChat(registerGuestVisitor1.name); await poAuxContext.poHomeOmnichannel.content.sendMessage('this_is_a_test_message_from_agent'); await expect(poLiveChat.txtChatMessage('this_is_a_test_message_from_agent')).toBeVisible(); }); @@ -612,7 +612,7 @@ test.describe('OC - Livechat API', () => { }); await test.step('Expect registered guest to have valid info', async () => { - await poAuxContext.poHomeOmnichannel.sidenav.openChat(registerGuestVisitor.name); + await poAuxContext.poHomeOmnichannel.sidebar.openChat(registerGuestVisitor.name); await poAuxContext.poHomeOmnichannel.content.btnGuestInfo.click(); // For some reason the guest info email information is being set to lowercase @@ -638,7 +638,7 @@ test.describe('OC - Livechat API', () => { await poLiveChat.onlineAgentMessage.type('this_a_test_message_from_visitor'); await poLiveChat.btnSendMessageToOnlineAgent.click(); - await poAuxContext.poHomeOmnichannel.sidenav.openChat(registerGuestVisitor.name); + await poAuxContext.poHomeOmnichannel.sidebar.openChat(registerGuestVisitor.name); await test.step('Expect setGuestEmail to change a guest email', async () => { await poLiveChat.page.evaluate( @@ -710,9 +710,9 @@ test.describe('OC - Livechat API', () => { // This is needed since the livechat will not react to online/offline status changes if already loaded in a page if (testInfo.title === 'Expect onOfflineFormSubmit to trigger callback') { - await poAuxContext.poHomeOmnichannel.sidenav.switchStatus('offline'); + await poAuxContext.poHomeOmnichannel.navbar.switchStatus('offline'); } else { - await poAuxContext.poHomeOmnichannel.sidenav.switchStatus('online'); + await poAuxContext.poHomeOmnichannel.navbar.switchStatus('online'); } await page.goto('/packages/rocketchat_livechat/assets/demo.html'); @@ -784,7 +784,7 @@ test.describe('OC - Livechat API', () => { }), ); - await poAuxContext.poHomeOmnichannel.sidenav.openChat(newVisitor.name); + await poAuxContext.poHomeOmnichannel.sidebar.openChat(newVisitor.name); await poAuxContext.poHomeOmnichannel.content.btnCloseChat.click(); await poAuxContext.poHomeOmnichannel.content.closeChatModal.inputComment.fill('this_is_a_test_comment'); await poAuxContext.poHomeOmnichannel.content.closeChatModal.btnConfirm.click(); @@ -846,8 +846,8 @@ test.describe('OC - Livechat API', () => { }), ); - await poAuxContext.poHomeOmnichannel.sidenav.openChat(newVisitor.name); - await poAuxContext.poHomeOmnichannel.sidenav.switchStatus('offline'); + await poAuxContext.poHomeOmnichannel.sidebar.openChat(newVisitor.name); + await poAuxContext.poHomeOmnichannel.navbar.switchStatus('offline'); await watchForTrigger; }); @@ -855,7 +855,7 @@ test.describe('OC - Livechat API', () => { test('OC - Livechat API - onOfflineFormSubmit', async () => { const newVisitor = createFakeVisitor(); - await poAuxContext.poHomeOmnichannel.sidenav.switchStatus('offline'); + await poAuxContext.poHomeOmnichannel.navbar.switchStatus('offline'); const watchForTrigger = page.waitForFunction(() => window.onOfflineFormSubmit === true); diff --git a/apps/meteor/tests/e2e/omnichannel/omnichannel-livechat-avatar-visibility.spec.ts b/apps/meteor/tests/e2e/omnichannel/omnichannel-livechat-avatar-visibility.spec.ts index 7729b5684228..3215b19c018f 100644 --- a/apps/meteor/tests/e2e/omnichannel/omnichannel-livechat-avatar-visibility.spec.ts +++ b/apps/meteor/tests/e2e/omnichannel/omnichannel-livechat-avatar-visibility.spec.ts @@ -64,7 +64,7 @@ test.describe('OC - Livechat - Avatar visibility', async () => { }); await test.step('expect to send a message as agent', async () => { - await poAuxContext.poHomeOmnichannel.sidenav.openChat(visitor.name); + await poAuxContext.poHomeOmnichannel.sidebar.openChat(visitor.name); await poAuxContext.poHomeOmnichannel.content.sendMessage('this_is_a_test_message_from_agent'); await expect(poLiveChat.txtChatMessage('this_is_a_test_message_from_agent')).toBeVisible(); }); @@ -88,7 +88,7 @@ test.describe('OC - Livechat - Avatar visibility', async () => { }); await test.step('should close the conversation', async () => { - await poAuxContext.poHomeOmnichannel.sidenav.openChat(visitor.name); + await poAuxContext.poHomeOmnichannel.sidebar.openChat(visitor.name); await poAuxContext.poHomeOmnichannel.content.btnCloseChat.click(); await poAuxContext.poHomeOmnichannel.content.closeChatModal.inputComment.fill('this_is_a_test_comment'); await poAuxContext.poHomeOmnichannel.content.closeChatModal.btnConfirm.click(); diff --git a/apps/meteor/tests/e2e/omnichannel/omnichannel-livechat-department.spec.ts b/apps/meteor/tests/e2e/omnichannel/omnichannel-livechat-department.spec.ts index 0c72c8894cc4..bbba997b7bd2 100644 --- a/apps/meteor/tests/e2e/omnichannel/omnichannel-livechat-department.spec.ts +++ b/apps/meteor/tests/e2e/omnichannel/omnichannel-livechat-department.spec.ts @@ -73,7 +73,7 @@ test.describe('OC - Livechat - Department Flow', () => { }); await test.step('expect message to be received by department', async () => { - await poHomeOmnichannelAgent1.sidenav.openChat(guest.name); + await poHomeOmnichannelAgent1.sidebar.openChat(guest.name); await expect(poHomeOmnichannelAgent1.content.lastUserMessage).toBeVisible(); await expect(poHomeOmnichannelAgent1.content.lastUserMessage).toContainText('this_a_test_message_from_user'); }); @@ -96,7 +96,7 @@ test.describe('OC - Livechat - Department Flow', () => { }); await test.step('expect message to be received by department 1', async () => { - await poHomeOmnichannelAgent1.sidenav.openChat(guest.name); + await poHomeOmnichannelAgent1.sidebar.openChat(guest.name); await expect(poHomeOmnichannelAgent1.content.lastUserMessage).toBeVisible(); await expect(poHomeOmnichannelAgent1.content.lastUserMessage).toContainText('this_a_test_message_from_user'); }); @@ -139,7 +139,7 @@ test.describe('OC - Livechat - Department Flow', () => { }); await test.step('expect message to be received by department', async () => { - await poHomeOmnichannelAgent2.sidenav.openChat(guest.name); + await poHomeOmnichannelAgent2.sidebar.openChat(guest.name); await expect(poHomeOmnichannelAgent2.content.lastUserMessage).toBeVisible(); await expect(poHomeOmnichannelAgent2.content.lastUserMessage).toContainText('this_a_test_message_from_user_to_department_2'); }); diff --git a/apps/meteor/tests/e2e/omnichannel/omnichannel-livechat-message-bubble-color.spec.ts b/apps/meteor/tests/e2e/omnichannel/omnichannel-livechat-message-bubble-color.spec.ts index 70d0441db5e1..6915401b73a5 100644 --- a/apps/meteor/tests/e2e/omnichannel/omnichannel-livechat-message-bubble-color.spec.ts +++ b/apps/meteor/tests/e2e/omnichannel/omnichannel-livechat-message-bubble-color.spec.ts @@ -64,7 +64,7 @@ test.describe('OC - Livechat - Bubble background color', async () => { }); await test.step('expect to send a message as agent', async () => { - await poAuxContext.poHomeOmnichannel.sidenav.openChat(visitor.name); + await poAuxContext.poHomeOmnichannel.sidebar.openChat(visitor.name); await poAuxContext.poHomeOmnichannel.content.sendMessage('message_from_agent'); }); @@ -95,7 +95,7 @@ test.describe('OC - Livechat - Bubble background color', async () => { }); await test.step('should close the conversation', async () => { - await poAuxContext.poHomeOmnichannel.sidenav.openChat(visitor.name); + await poAuxContext.poHomeOmnichannel.sidebar.openChat(visitor.name); await poAuxContext.poHomeOmnichannel.content.btnCloseChat.click(); await poAuxContext.poHomeOmnichannel.content.closeChatModal.inputComment.fill('this_is_a_test_comment'); await poAuxContext.poHomeOmnichannel.content.closeChatModal.btnConfirm.click(); diff --git a/apps/meteor/tests/e2e/omnichannel/omnichannel-livechat-queue-management-autoselection.spec.ts b/apps/meteor/tests/e2e/omnichannel/omnichannel-livechat-queue-management-autoselection.spec.ts index bb736b6fde4c..a11ae455e9ad 100644 --- a/apps/meteor/tests/e2e/omnichannel/omnichannel-livechat-queue-management-autoselection.spec.ts +++ b/apps/meteor/tests/e2e/omnichannel/omnichannel-livechat-queue-management-autoselection.spec.ts @@ -32,7 +32,7 @@ test.describe('OC - Livechat - Queue Management', () => { poHomeOmnichannel = new HomeOmnichannel(omniPage); // Agent will be offline for these tests - await poHomeOmnichannel.sidenav.switchOmnichannelStatus('offline'); + await poHomeOmnichannel.navbar.switchOmnichannelStatus('offline'); }); test.beforeEach(async ({ browser, api }) => { @@ -100,7 +100,7 @@ test.describe('OC - Livechat - Queue Management', () => { }); await test.step('should start the queue by making the agent available again', async () => { - await poHomeOmnichannel.sidenav.switchOmnichannelStatus('online'); + await poHomeOmnichannel.navbar.switchOmnichannelStatus('online'); }); await test.step('user1 should get assigned to the first chat', async () => { diff --git a/apps/meteor/tests/e2e/omnichannel/omnichannel-livechat-queue-management.spec.ts b/apps/meteor/tests/e2e/omnichannel/omnichannel-livechat-queue-management.spec.ts index ee91c49bfb16..ab68afce975f 100644 --- a/apps/meteor/tests/e2e/omnichannel/omnichannel-livechat-queue-management.spec.ts +++ b/apps/meteor/tests/e2e/omnichannel/omnichannel-livechat-queue-management.spec.ts @@ -106,7 +106,7 @@ test.describe('OC - Livechat - Queue Management', () => { }); await test.step('should allow the agent to take the secondary user chat', async () => { - await poHomeOmnichannel.sidenav.getQueuedChat(secondVisitor.name).click(); + await poHomeOmnichannel.sidebar.getQueuedChat(secondVisitor.name).click(); await expect(poHomeOmnichannel.content.btnTakeChat).toBeVisible(); await poHomeOmnichannel.content.btnTakeChat.click(); await expect(poHomeOmnichannel.content.lastSystemMessageBody).toHaveText('joined the channel'); diff --git a/apps/meteor/tests/e2e/omnichannel/omnichannel-livechat.spec.ts b/apps/meteor/tests/e2e/omnichannel/omnichannel-livechat.spec.ts index cf805ca233dd..d24945bafc46 100644 --- a/apps/meteor/tests/e2e/omnichannel/omnichannel-livechat.spec.ts +++ b/apps/meteor/tests/e2e/omnichannel/omnichannel-livechat.spec.ts @@ -52,14 +52,14 @@ test.describe.serial('OC - Livechat', () => { }); await test.step('expect message to be received by agent', async () => { - await poHomeOmnichannel.sidenav.openChat(firstVisitor.name); + await poHomeOmnichannel.sidebar.openChat(firstVisitor.name); await expect(poHomeOmnichannel.content.lastUserMessage).toBeVisible(); await expect(poHomeOmnichannel.content.lastUserMessage).toContainText('this_a_test_message_from_user'); }); }); test('OC - Livechat - Send message to livechat customer', async () => { - await poHomeOmnichannel.sidenav.openChat(firstVisitor.name); + await poHomeOmnichannel.sidebar.openChat(firstVisitor.name); await test.step('expect message to be sent by agent', async () => { await poHomeOmnichannel.content.sendMessage('this_a_test_message_from_agent'); @@ -97,7 +97,7 @@ test.describe.serial('OC - Livechat', () => { }); test('OC - Livechat - Close livechat conversation', async () => { - await poHomeOmnichannel.sidenav.openChat(firstVisitor.name); + await poHomeOmnichannel.sidebar.openChat(firstVisitor.name); await test.step('expect livechat conversation to be closed by agent', async () => { await poHomeOmnichannel.content.btnCloseChat.click(); @@ -148,7 +148,7 @@ test.describe.serial('OC - Livechat - Visitors closing the room is disabled', () }); test('OC - Livechat - Close chat disabled, agents can close', async () => { - await poHomeOmnichannel.sidenav.openChat(firstVisitor.name); + await poHomeOmnichannel.sidebar.openChat(firstVisitor.name); await test.step('expect livechat conversation to be closed by agent', async () => { await poHomeOmnichannel.content.btnCloseChat.click(); @@ -196,7 +196,7 @@ test.describe.serial('OC - Livechat - Resub after close room', () => { }); await test.step('expect message to be received by agent', async () => { - await poHomeOmnichannel.sidenav.openChat(secondVisitor.name); + await poHomeOmnichannel.sidebar.openChat(secondVisitor.name); await expect(poHomeOmnichannel.content.lastUserMessage).toBeVisible(); await expect(poHomeOmnichannel.content.lastUserMessage).toContainText('this_a_test_message_from_user'); }); @@ -243,7 +243,7 @@ test.describe('OC - Livechat - Resume chat after closing', () => { }); await test.step('expect message to be received by agent', async () => { - await poHomeOmnichannel.sidenav.openChat(firstVisitor.name); + await poHomeOmnichannel.sidebar.openChat(firstVisitor.name); await expect(poHomeOmnichannel.content.lastUserMessage).toBeVisible(); await expect(poHomeOmnichannel.content.lastUserMessage).toContainText('this_a_test_message_from_user'); }); diff --git a/apps/meteor/tests/e2e/omnichannel/omnichannel-manual-selection-logout.spec.ts b/apps/meteor/tests/e2e/omnichannel/omnichannel-manual-selection-logout.spec.ts index 9fbb567e3a87..4dd75016324e 100644 --- a/apps/meteor/tests/e2e/omnichannel/omnichannel-manual-selection-logout.spec.ts +++ b/apps/meteor/tests/e2e/omnichannel/omnichannel-manual-selection-logout.spec.ts @@ -31,7 +31,7 @@ test.describe('OC - Manual Selection After Relogin', () => { poOmnichannel = new HomeOmnichannel(page); await page.goto('/home'); - await poOmnichannel.sidenav.logout(); + await poOmnichannel.navbar.logout(); await poOmnichannel.page.locator('role=textbox[name=/username/i]').waitFor({ state: 'visible' }); await poOmnichannel.page.locator('role=textbox[name=/username/i]').fill('user1'); await poOmnichannel.page.locator('[name=password]').fill(DEFAULT_USER_CREDENTIALS.password); @@ -48,14 +48,14 @@ test.describe('OC - Manual Selection After Relogin', () => { }); test('OC - Manual Selection - Logout & Login', async ({ api }) => { - expect(await poOmnichannel.page.locator('#omnichannel-status-toggle').getAttribute('title')).toEqual('Turn off answer chats'); + expect(await poOmnichannel.navbar.omnichannelToggleStatusaBtn.getAttribute('title')).toEqual('Turn off answer chats'); const { data: { room }, } = await createConversation(api); await test.step('expect login and see the chat in queue after login', async () => { - await poOmnichannel.sidenav.getSidebarItemByName(room.fname).click(); + await poOmnichannel.sidebar.getSidebarItemByName(room.fname).click(); await expect(poOmnichannel.content.inputMessage).not.toBeVisible(); }); @@ -70,7 +70,7 @@ test.describe('OC - Manual Selection After Relogin', () => { await expect(poOmnichannel.content.inputMessage).toBeVisible(); await expect(poOmnichannel.content.btnTakeChat).not.toBeVisible(); await expect(poOmnichannel.content.btnReturnToQueue).toBeVisible(); - await expect(poOmnichannel.sidenav.getSidebarItemByName(room.fname)).toBeVisible(); + await expect(poOmnichannel.sidebar.getSidebarItemByName(room.fname)).toBeVisible(); }); }); }); diff --git a/apps/meteor/tests/e2e/omnichannel/omnichannel-manual-selection.spec.ts b/apps/meteor/tests/e2e/omnichannel/omnichannel-manual-selection.spec.ts index ff7245e0b532..6e249d0924ac 100644 --- a/apps/meteor/tests/e2e/omnichannel/omnichannel-manual-selection.spec.ts +++ b/apps/meteor/tests/e2e/omnichannel/omnichannel-manual-selection.spec.ts @@ -56,18 +56,18 @@ test.describe('OC - Manual Selection', () => { } = await createConversation(api); await test.step('expect not be able to see queue when livechat is disabled', async () => { - await poOmnichannel.sidenav.switchOmnichannelStatus('offline'); - await agentB.poHomeOmnichannel.sidenav.switchOmnichannelStatus('offline'); - await expect(poOmnichannel.sidenav.getSidebarItemByName(room.fname)).not.toBeVisible(); - await expect(agentB.poHomeOmnichannel.sidenav.getSidebarItemByName(room.fname)).not.toBeVisible(); - await poOmnichannel.sidenav.switchOmnichannelStatus('online'); - await agentB.poHomeOmnichannel.sidenav.switchOmnichannelStatus('online'); - await expect(poOmnichannel.sidenav.getSidebarItemByName(room.fname)).toBeVisible(); - await expect(agentB.poHomeOmnichannel.sidenav.getSidebarItemByName(room.fname)).toBeVisible(); + await poOmnichannel.navbar.switchOmnichannelStatus('offline'); + await agentB.poHomeOmnichannel.navbar.switchOmnichannelStatus('offline'); + await expect(poOmnichannel.sidebar.getSidebarItemByName(room.fname)).not.toBeVisible(); + await expect(agentB.poHomeOmnichannel.sidebar.getSidebarItemByName(room.fname)).not.toBeVisible(); + await poOmnichannel.navbar.switchOmnichannelStatus('online'); + await agentB.poHomeOmnichannel.navbar.switchOmnichannelStatus('online'); + await expect(poOmnichannel.sidebar.getSidebarItemByName(room.fname)).toBeVisible(); + await expect(agentB.poHomeOmnichannel.sidebar.getSidebarItemByName(room.fname)).toBeVisible(); }); await test.step('expect to be able join chat in read mode', async () => { - await poOmnichannel.sidenav.getSidebarItemByName(room.fname).click(); + await poOmnichannel.sidebar.getSidebarItemByName(room.fname).click(); await expect(poOmnichannel.content.inputMessage).not.toBeVisible(); await expect(poOmnichannel.content.btnTakeChat).toBeVisible(); }); @@ -77,12 +77,12 @@ test.describe('OC - Manual Selection', () => { await expect(poOmnichannel.content.lastSystemMessageBody).toHaveText('joined the channel'); await expect(poOmnichannel.content.inputMessage).toBeVisible(); await expect(poOmnichannel.content.btnTakeChat).not.toBeVisible(); - await expect(poOmnichannel.sidenav.getSidebarItemByName(room.fname)).toBeVisible(); + await expect(poOmnichannel.sidebar.getSidebarItemByName(room.fname)).toBeVisible(); }); await test.step('expect chat to leave the queue', async () => { await page.waitForTimeout(250); - await expect(agentB.poHomeOmnichannel.sidenav.getSidebarItemByName(room.fname)).not.toBeVisible(); + await expect(agentB.poHomeOmnichannel.sidebar.getSidebarItemByName(room.fname)).not.toBeVisible(); }); await test.step('expect to be able return to queue', async () => { @@ -92,10 +92,10 @@ test.describe('OC - Manual Selection', () => { }); await test.step('expect chat to be back in queue', async () => { - await expect(poOmnichannel.sidenav.getSidebarItemByName(room.fname)).toBeVisible(); - await expect(agentB.poHomeOmnichannel.sidenav.getSidebarItemByName(room.fname)).toBeVisible(); + await expect(poOmnichannel.sidebar.getSidebarItemByName(room.fname)).toBeVisible(); + await expect(agentB.poHomeOmnichannel.sidebar.getSidebarItemByName(room.fname)).toBeVisible(); - await poOmnichannel.sidenav.getSidebarItemByName(room.fname).click(); + await poOmnichannel.sidebar.getSidebarItemByName(room.fname).click(); await expect(poOmnichannel.content.inputMessage).not.toBeVisible(); await expect(poOmnichannel.content.btnTakeChat).toBeVisible(); }); diff --git a/apps/meteor/tests/e2e/omnichannel/omnichannel-priorities-sidebar.spec.ts b/apps/meteor/tests/e2e/omnichannel/omnichannel-priorities-sidebar.spec.ts index 10fe89818fe2..af2889fb117a 100644 --- a/apps/meteor/tests/e2e/omnichannel/omnichannel-priorities-sidebar.spec.ts +++ b/apps/meteor/tests/e2e/omnichannel/omnichannel-priorities-sidebar.spec.ts @@ -58,21 +58,21 @@ test.describe.serial('OC - Priorities [Sidebar]', () => { await page.emulateMedia({ reducedMotion: 'reduce' }); await test.step('expect to change inquiry priority using sidebar menu', async () => { - await poHomeChannel.sidenav.getSidebarItemByName(visitor.name).click(); + await poHomeChannel.sidebar.getSidebarItemByName(visitor.name).click(); await expect(poHomeChannel.content.btnTakeChat).toBeVisible(); await expect(poRoomInfo.getLabel('Priority')).not.toBeVisible(); - await poHomeChannel.sidenav.selectPriority(visitor.name, 'Lowest'); + await poHomeChannel.sidebar.selectPriority(visitor.name, 'Lowest'); await systemMessage.locator(`text="${getPrioritySystemMessage('user1', 'Lowest')}"`).waitFor(); await expect(poRoomInfo.getLabel('Priority')).toBeVisible(); await expect(poRoomInfo.getInfo('Lowest')).toBeVisible(); - await poHomeChannel.sidenav.selectPriority(visitor.name, 'Highest'); + await poHomeChannel.sidebar.selectPriority(visitor.name, 'Highest'); await systemMessage.locator(`text="${getPrioritySystemMessage('user1', 'Highest')}"`).waitFor(); await expect(poRoomInfo.getInfo('Highest')).toBeVisible(); - await poHomeChannel.sidenav.selectPriority(visitor.name, 'Unprioritized'); + await poHomeChannel.sidebar.selectPriority(visitor.name, 'Unprioritized'); await systemMessage.locator(`text="${getPrioritySystemMessage('user1', 'Unprioritized')}"`).waitFor(); await expect(poRoomInfo.getLabel('Priority')).not.toBeVisible(); await expect(poRoomInfo.getInfo('Unprioritized')).not.toBeVisible(); @@ -85,16 +85,16 @@ test.describe.serial('OC - Priorities [Sidebar]', () => { await expect(poRoomInfo.getLabel('Priority')).not.toBeVisible(); - await poHomeChannel.sidenav.selectPriority(visitor.name, 'Lowest'); + await poHomeChannel.sidebar.selectPriority(visitor.name, 'Lowest'); await systemMessage.locator(`text="${getPrioritySystemMessage('user1', 'Lowest')}"`).waitFor(); await expect(poRoomInfo.getLabel('Priority')).toBeVisible(); await expect(poRoomInfo.getInfo('Lowest')).toBeVisible(); - await poHomeChannel.sidenav.selectPriority(visitor.name, 'Highest'); + await poHomeChannel.sidebar.selectPriority(visitor.name, 'Highest'); await systemMessage.locator(`text="${getPrioritySystemMessage('user1', 'Highest')}"`).waitFor(); await expect(poRoomInfo.getInfo('Highest')).toBeVisible(); - await poHomeChannel.sidenav.selectPriority(visitor.name, 'Unprioritized'); + await poHomeChannel.sidebar.selectPriority(visitor.name, 'Unprioritized'); await systemMessage.locator(`text="${getPrioritySystemMessage('user1', 'Unprioritized')}"`).waitFor(); await expect(poRoomInfo.getLabel('Priority')).not.toBeVisible(); await expect(poRoomInfo.getInfo('Unprioritized')).not.toBeVisible(); diff --git a/apps/meteor/tests/e2e/omnichannel/omnichannel-send-pdf-transcript.spec.ts b/apps/meteor/tests/e2e/omnichannel/omnichannel-send-pdf-transcript.spec.ts index 75c06efc7507..6d79d8a6edb8 100644 --- a/apps/meteor/tests/e2e/omnichannel/omnichannel-send-pdf-transcript.spec.ts +++ b/apps/meteor/tests/e2e/omnichannel/omnichannel-send-pdf-transcript.spec.ts @@ -45,7 +45,7 @@ test.describe('omnichannel- export chat transcript as PDF', () => { await test.step('Expect to have 1 omnichannel assigned to agent 1', async () => { await new Promise((resolve) => setTimeout(resolve, 5000)); - await agent.poHomeChannel.sidenav.openChat(newVisitor.name); + await agent.poHomeChannel.sidebar.openChat(newVisitor.name); }); await test.step('Expect to be not able send transcript as PDF', async () => { @@ -65,7 +65,7 @@ test.describe('omnichannel- export chat transcript as PDF', () => { // Exported PDF can be downloaded from rocket.cat room await test.step('Expect to have exported PDF in rocket.cat', async () => { await page.waitForTimeout(3000); - await agent.poHomeChannel.sidenav.openChat('rocket.cat'); + await agent.poHomeChannel.sidebar.openChat('rocket.cat'); await expect(agent.poHomeChannel.transcript.DownloadedPDF).toBeVisible(); }); diff --git a/apps/meteor/tests/e2e/omnichannel/omnichannel-send-transcript.spec.ts b/apps/meteor/tests/e2e/omnichannel/omnichannel-send-transcript.spec.ts index bc19259bfe1f..0f0319e4348e 100644 --- a/apps/meteor/tests/e2e/omnichannel/omnichannel-send-transcript.spec.ts +++ b/apps/meteor/tests/e2e/omnichannel/omnichannel-send-transcript.spec.ts @@ -42,7 +42,7 @@ test.describe('omnichannel-transcript', () => { }); await test.step('Expect to have 1 omnichannel assigned to agent 1', async () => { - await agent.poHomeChannel.sidenav.openChat(newVisitor.name); + await agent.poHomeChannel.sidebar.openChat(newVisitor.name); }); await test.step('Expect to be able to send transcript to email', async () => { diff --git a/apps/meteor/tests/e2e/omnichannel/omnichannel-takeChat.spec.ts b/apps/meteor/tests/e2e/omnichannel/omnichannel-takeChat.spec.ts index 92a06ffb061a..05e9a66f44e3 100644 --- a/apps/meteor/tests/e2e/omnichannel/omnichannel-takeChat.spec.ts +++ b/apps/meteor/tests/e2e/omnichannel/omnichannel-takeChat.spec.ts @@ -31,8 +31,8 @@ test.describe('omnichannel-takeChat', () => { }); test.afterAll(async ({ api }) => { - await agent.poHomeChannel.sidenav.switchOmnichannelStatus('online'); - await agent.poHomeChannel.sidenav.switchStatus('online'); + await agent.poHomeChannel.navbar.switchOmnichannelStatus('online'); + await agent.poHomeChannel.navbar.switchStatus('online'); await agent.page.close(); await Promise.all([ @@ -43,7 +43,7 @@ test.describe('omnichannel-takeChat', () => { }); test.beforeEach('start a new livechat chat', async ({ page, api }) => { - await agent.poHomeChannel.sidenav.switchStatus('online'); + await agent.poHomeChannel.navbar.switchStatus('online'); newVisitor = createFakeVisitor(); @@ -55,19 +55,19 @@ test.describe('omnichannel-takeChat', () => { test('When agent is online should take the chat', async () => { await sendLivechatMessage(); - await agent.poHomeChannel.sidenav.getQueuedChat(newVisitor.name).click(); + await agent.poHomeChannel.sidebar.getQueuedChat(newVisitor.name).click(); await expect(agent.poHomeChannel.content.btnTakeChat).toBeVisible(); await agent.poHomeChannel.content.btnTakeChat.click(); - await agent.poHomeChannel.sidenav.openChat(newVisitor.name); + await agent.poHomeChannel.sidebar.openChat(newVisitor.name); await expect(agent.poHomeChannel.content.btnTakeChat).not.toBeVisible(); await expect(agent.poHomeChannel.content.inputMessage).toBeVisible(); }); test('When agent is offline should not take the chat', async () => { - await agent.poHomeChannel.sidenav.switchStatus('offline'); + await agent.poHomeChannel.navbar.switchStatus('offline'); await sendLivechatMessage(); @@ -77,13 +77,13 @@ test.describe('omnichannel-takeChat', () => { test('When a new livechat conversation starts but agent is offline, it should not be able to take the chat', async () => { await sendLivechatMessage(); - await agent.poHomeChannel.sidenav.switchStatus('offline'); - await agent.poHomeChannel.sidenav.getQueuedChat(newVisitor.name).click(); + await agent.poHomeChannel.navbar.switchStatus('offline'); + await agent.poHomeChannel.sidebar.getQueuedChat(newVisitor.name).click(); await expect(agent.poHomeChannel.content.btnTakeChat).toBeDisabled(); - await agent.poHomeChannel.sidenav.switchStatus('online'); - await agent.poHomeChannel.sidenav.switchOmnichannelStatus('offline'); + await agent.poHomeChannel.navbar.switchStatus('online'); + await agent.poHomeChannel.navbar.switchOmnichannelStatus('offline'); await expect(agent.poHomeChannel.content.btnTakeChat).toBeDisabled(); }); diff --git a/apps/meteor/tests/e2e/omnichannel/omnichannel-transfer-to-another-agents.spec.ts b/apps/meteor/tests/e2e/omnichannel/omnichannel-transfer-to-another-agents.spec.ts index 5be6c4181460..8fce16a8af17 100644 --- a/apps/meteor/tests/e2e/omnichannel/omnichannel-transfer-to-another-agents.spec.ts +++ b/apps/meteor/tests/e2e/omnichannel/omnichannel-transfer-to-another-agents.spec.ts @@ -47,8 +47,8 @@ test.describe('OC - Chat transfers [Agent role]', () => { // Make "user-1" online & "user-2" offline so that chat can be automatically routed to "user-1" test.beforeAll(async () => { const [agentA, agentB] = sessions; - await agentA.poHomeOmnichannel.sidenav.switchStatus('online'); - await agentB.poHomeOmnichannel.sidenav.switchStatus('offline'); + await agentA.poHomeOmnichannel.navbar.switchStatus('online'); + await agentB.poHomeOmnichannel.navbar.switchStatus('offline'); }); // Close sessions @@ -66,11 +66,11 @@ test.describe('OC - Chat transfers [Agent role]', () => { const [{ visitor }] = conversations.map(({ data }) => data); await test.step('expect to have 1 omnichannel assigned to agent 1', async () => { - await agentA.poHomeOmnichannel.sidenav.getSidebarItemByName(visitor.name).click(); + await agentA.poHomeOmnichannel.sidebar.getSidebarItemByName(visitor.name).click(); }); await test.step('expect to not be able to transfer chat to "user-2" when that user is offline', async () => { - await agentB.poHomeOmnichannel.sidenav.switchStatus('offline'); + await agentB.poHomeOmnichannel.navbar.switchStatus('offline'); await agentA.poHomeOmnichannel.content.btnForwardChat.click(); await agentA.poHomeOmnichannel.content.forwardChatModal.inputFowardUser.click(); @@ -81,9 +81,9 @@ test.describe('OC - Chat transfers [Agent role]', () => { }); await test.step('expect to be able to transfer an omnichannel to conversation to agent 2 as agent 1 when agent 2 is online', async () => { - await agentB.poHomeOmnichannel.sidenav.switchStatus('online'); + await agentB.poHomeOmnichannel.navbar.switchStatus('online'); - await agentA.poHomeOmnichannel.sidenav.getSidebarItemByName(visitor.name).click(); + await agentA.poHomeOmnichannel.sidebar.getSidebarItemByName(visitor.name).click(); await agentA.poHomeOmnichannel.content.btnForwardChat.click(); await agentA.poHomeOmnichannel.content.forwardChatModal.selectUser('user2'); await agentA.poHomeOmnichannel.content.forwardChatModal.inputComment.type('any_comment'); @@ -92,7 +92,7 @@ test.describe('OC - Chat transfers [Agent role]', () => { }); await test.step('expect to have 1 omnichannel assigned to agent 2', async () => { - await agentB.poHomeOmnichannel.sidenav.getSidebarItemByName(visitor.name).click(); + await agentB.poHomeOmnichannel.sidebar.getSidebarItemByName(visitor.name).click(); }); }); }); diff --git a/apps/meteor/tests/e2e/page-objects/fragments/create-room-modal.ts b/apps/meteor/tests/e2e/page-objects/fragments/create-room-modal.ts index 07a14395a1c5..10b9cc393ba2 100644 --- a/apps/meteor/tests/e2e/page-objects/fragments/create-room-modal.ts +++ b/apps/meteor/tests/e2e/page-objects/fragments/create-room-modal.ts @@ -26,6 +26,10 @@ export class CreateRoomModal { return this.getModalByRoomType('channel').getByRole('textbox', { name: 'Name' }); } + get inputTeamName(): Locator { + return this.getModalByRoomType('team').getByRole('textbox', { name: 'Name' }); + } + get inputDirectUsernames(): Locator { return this.getModalByRoomType('direct message').getByRole('textbox'); } diff --git a/apps/meteor/tests/e2e/page-objects/fragments/navbar.ts b/apps/meteor/tests/e2e/page-objects/fragments/navbar.ts index a3e574922185..5161bbf5c991 100644 --- a/apps/meteor/tests/e2e/page-objects/fragments/navbar.ts +++ b/apps/meteor/tests/e2e/page-objects/fragments/navbar.ts @@ -1,4 +1,4 @@ -import type { Locator, Page } from '@playwright/test'; +import { expect, type Locator, type Page } from '@playwright/test'; export class Navbar { private readonly page: Page; @@ -56,14 +56,18 @@ export class Navbar { return this.settingsGroup.getByRole('menuitem', { name: 'Omnichannel', exact: true }); } + get omnichannelToggleStatusaBtn(): Locator { + return this.omnichannelToolbar.getByRole('button', { name: 'answer chats' }); + } + async switchStatus(status: 'offline' | 'online'): Promise { await this.userProfileMenu.click(); await this.settingsGroup.getByRole('menu').getByRole('menuitemcheckbox', { name: status, exact: true }).click(); } async switchOmnichannelStatus(status: 'offline' | 'online'): Promise { - const toggleButton = this.omnichannelToolbar.getByRole('button', { name: 'answer chats' }); - expect(toggleButton).toBeVisible(); + const toggleButton = this.omnichannelToggleStatusaBtn; + await expect(toggleButton).toBeVisible(); enum StatusTitleMap { offline = 'Turn on answer chats', @@ -86,6 +90,6 @@ export class Navbar { async logout(): Promise { await this.userProfileMenu.click(); - await this.settingsGroup.getByRole('menu').getByRole('menuitemcheckbox', { name: 'Locoug', exact: true }).click(); + await this.settingsGroup.getByRole('menu').getByRole('menuitemcheckbox', { name: 'Logout', exact: true }).click(); } } diff --git a/apps/meteor/tests/e2e/page-objects/fragments/sidebar.ts b/apps/meteor/tests/e2e/page-objects/fragments/sidebar.ts index 16684e34dc0c..8162ef7885c6 100644 --- a/apps/meteor/tests/e2e/page-objects/fragments/sidebar.ts +++ b/apps/meteor/tests/e2e/page-objects/fragments/sidebar.ts @@ -51,11 +51,11 @@ export class Sidebar { } async waitForChannel(): Promise { - await this.page.locator('role=main').waitFor(); - await this.page.locator('role=main >> role=heading[level=1]').waitFor(); - await this.page.locator('role=main >> role=list').waitFor(); + await this.page.getByRole('main').waitFor(); + await this.page.getByRole('main').getByRole('heading', { level: 1 }).waitFor(); + await this.page.getByRole('main').getByRole('list', { name: 'Message list' }).waitFor(); - await expect(this.page.locator('role=main >> role=list')).not.toHaveAttribute('aria-busy', 'true'); + await expect(this.page.getByRole('main').getByRole('list', { name: 'Message list' })).not.toHaveAttribute('aria-busy', 'true'); } async typeSearch(name: string): Promise { @@ -107,7 +107,7 @@ export class Sidebar { // Note: this is different from openChat because queued chats are not searchable getQueuedChat(name: string): Locator { - return this.page.locator('[data-qa="sidebar-item-title"]', { hasText: new RegExp(`^${name}$`) }).first(); + return this.sidebar.getByRole('link', { name: new RegExp(`^${name}$`) }).first(); } async openCreateNewByLabel(name: 'Direct message' | 'Discussion' | 'Channel' | 'Team'): Promise { diff --git a/apps/meteor/tests/e2e/page-objects/omnichannel-transcript.ts b/apps/meteor/tests/e2e/page-objects/omnichannel-transcript.ts index d7ece60a5ef6..91dbeca814f9 100644 --- a/apps/meteor/tests/e2e/page-objects/omnichannel-transcript.ts +++ b/apps/meteor/tests/e2e/page-objects/omnichannel-transcript.ts @@ -21,7 +21,7 @@ export class OmnichannelTranscript { } get contactCenter(): Locator { - return this.page.locator('//button[@data-tooltip="Contact Center"]'); + return this.page.getByRole('button', { name: 'Contact Center', exact: true }); } get contactCenterChats(): Locator { From 1a34c85e46de103a5d857dea7b421d8950ed237d Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Thu, 5 Dec 2024 12:07:30 -0300 Subject: [PATCH 14/24] test: improve `mark-unread` consistency --- apps/meteor/tests/e2e/mark-unread.spec.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/apps/meteor/tests/e2e/mark-unread.spec.ts b/apps/meteor/tests/e2e/mark-unread.spec.ts index c63fc1641f3f..b76c07093144 100644 --- a/apps/meteor/tests/e2e/mark-unread.spec.ts +++ b/apps/meteor/tests/e2e/mark-unread.spec.ts @@ -2,6 +2,7 @@ import { createAuxContext } from './fixtures/createAuxContext'; import { Users } from './fixtures/userStates'; import { HomeChannel } from './page-objects'; import { createTargetChannel } from './utils'; +import { setUserPreferences } from './utils/setUserPreferences'; import { test, expect } from './utils/test'; test.use({ storageState: Users.admin.state }); @@ -23,6 +24,12 @@ test.describe.serial('mark-unread', () => { }); test.describe('Mark Unread - Sidebar Action', () => { + test.beforeEach(async ({ api }) => { + await setUserPreferences(api, { sidebarGroupByType: true }); + }); + test.afterEach(async ({ api }) => { + await setUserPreferences(api, { sidebarGroupByType: false }); + }); test('should not mark empty room as unread', async () => { await poHomeChannel.sidebar.typeSearch(targetChannel); const item = poHomeChannel.sidebar.getSearchRoomByName(targetChannel); From 53eddf6d181a04aab337c074d35356e420323e01 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Thu, 5 Dec 2024 14:50:32 -0300 Subject: [PATCH 15/24] test: `channel-management` --- .../tests/e2e/channel-management.spec.ts | 66 +++++++++---------- .../page-objects/fragments/home-content.ts | 11 +++- 2 files changed, 41 insertions(+), 36 deletions(-) diff --git a/apps/meteor/tests/e2e/channel-management.spec.ts b/apps/meteor/tests/e2e/channel-management.spec.ts index 84f74067db0e..a62168d55325 100644 --- a/apps/meteor/tests/e2e/channel-management.spec.ts +++ b/apps/meteor/tests/e2e/channel-management.spec.ts @@ -25,7 +25,7 @@ test.describe.serial('channel-management', () => { }); test('should navigate on toolbar using arrow keys', async ({ page }) => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await poHomeChannel.content.sendMessage('hello composer'); await poHomeChannel.roomHeaderFavoriteBtn.focus(); @@ -37,7 +37,7 @@ test.describe.serial('channel-management', () => { }); test('should move the focus away from toolbar using tab key', async ({ page }) => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await poHomeChannel.roomHeaderFavoriteBtn.focus(); await page.keyboard.press('Tab'); @@ -48,7 +48,7 @@ test.describe.serial('channel-management', () => { test('should be able to navigate on call popup with keyboard', async ({ page }) => { test.skip(!IS_EE, 'Premium Only'); - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await poHomeChannel.roomHeaderFavoriteBtn.focus(); await page.keyboard.press('Tab'); @@ -61,7 +61,7 @@ test.describe.serial('channel-management', () => { }); test('should add user1 to targetChannel', async () => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await poHomeChannel.tabs.btnTabMembers.click(); await poHomeChannel.tabs.members.showAllUsers(); await poHomeChannel.tabs.members.addUser('user1'); @@ -71,7 +71,7 @@ test.describe.serial('channel-management', () => { }); test('should edit topic of targetChannel', async ({ page }) => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await poHomeChannel.tabs.btnRoomInfo.click(); await poHomeChannel.tabs.room.btnEdit.click(); await poHomeChannel.tabs.room.inputTopic.fill('hello-topic-edited'); @@ -79,13 +79,13 @@ test.describe.serial('channel-management', () => { await poHomeChannel.dismissToast(); await poHomeChannel.tabs.btnRoomInfo.click(); - await expect(page.getByRole('heading', { name: 'hello-topic-edited' })).toBeVisible(); + await expect(poHomeChannel.content.getRoomTopic('hello-topic-edited')).toBeVisible(); await expect(page.getByRole('dialog', { name: 'Channel info' })).toContainText('hello-topic-edited'); await expect(poHomeChannel.content.getSystemMessageByText('changed room topic to hello-topic-edited')).toBeVisible(); }); test('should edit announcement of targetChannel', async ({ page }) => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await poHomeChannel.tabs.btnRoomInfo.click(); await poHomeChannel.tabs.room.btnEdit.click(); await poHomeChannel.tabs.room.inputAnnouncement.fill('hello-announcement-edited'); @@ -98,7 +98,7 @@ test.describe.serial('channel-management', () => { }); test('should edit description of targetChannel', async ({ page }) => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await poHomeChannel.tabs.btnRoomInfo.click(); await poHomeChannel.tabs.room.btnEdit.click(); await poHomeChannel.tabs.room.inputDescription.fill('hello-description-edited'); @@ -111,22 +111,22 @@ test.describe.serial('channel-management', () => { }); test('should edit name of targetChannel', async ({ page }) => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await poHomeChannel.tabs.btnRoomInfo.click(); await poHomeChannel.tabs.room.btnEdit.click(); await poHomeChannel.tabs.room.inputName.fill(`NAME-EDITED-${targetChannel}`); await poHomeChannel.tabs.room.btnSave.click(); targetChannel = `NAME-EDITED-${targetChannel}`; - await expect(page.locator(`role=main >> role=heading[name="${targetChannel}"]`)).toBeVisible(); - await poHomeChannel.sidenav.openChat(targetChannel); + await expect(poHomeChannel.content.channelHeader).toContainText(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await expect(page).toHaveURL(`/channel/${targetChannel}`); }); test('should truncate the room name for small screens', async ({ page }) => { const hugeName = faker.string.alpha(200); - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await poHomeChannel.tabs.btnRoomInfo.click(); await poHomeChannel.tabs.room.btnEdit.click(); await poHomeChannel.tabs.room.inputName.fill(hugeName); @@ -134,20 +134,20 @@ test.describe.serial('channel-management', () => { targetChannel = hugeName; await page.setViewportSize({ width: 640, height: 460 }); - await expect(page.getByRole('heading', { name: hugeName })).toHaveCSS('width', '419px'); + await expect(page.getByRole('heading', { name: hugeName })).toHaveCSS('width', '427px'); }); test('should open sidebar clicking on sidebar toggler', async ({ page }) => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await page.setViewportSize({ width: 640, height: 460 }); await page.getByRole('button', { name: 'Open sidebar' }).click(); - await expect(page.getByRole('navigation')).toBeVisible(); + await expect(poHomeChannel.sidebar.sidebar).toBeVisible(); }); test('should open room info when clicking on roomName', async ({ page }) => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await page.getByRole('button', { name: targetChannel }).first().focus(); await page.keyboard.press('Space'); await page.getByRole('dialog').waitFor(); @@ -157,7 +157,7 @@ test.describe.serial('channel-management', () => { test('should create a discussion using the message composer', async ({ page }) => { discussionName = faker.string.uuid(); - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await poHomeChannel.content.btnMenuMoreActions.click(); await page.getByRole('menuitem', { name: 'Discussion' }).click(); await page.getByRole('textbox', { name: 'Name' }).fill(discussionName); @@ -167,7 +167,7 @@ test.describe.serial('channel-management', () => { }); test('should access targetTeam through discussion header', async ({ page }) => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await page.locator('[data-qa-type="message"]', { hasText: discussionName }).locator('button').first().click(); await page.getByRole('button', { name: discussionName }).first().focus(); await page.keyboard.press('Tab'); @@ -178,7 +178,7 @@ test.describe.serial('channel-management', () => { }); test('should edit notification preferences of targetChannel', async () => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await poHomeChannel.tabs.kebab.click({ force: true }); await poHomeChannel.tabs.btnNotificationPreferences.click({ force: true }); await poHomeChannel.tabs.notificationPreferences.updateAllNotificationPreferences(); @@ -200,7 +200,7 @@ test.describe.serial('channel-management', () => { }); test('should mute user1', async () => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await poHomeChannel.tabs.btnTabMembers.click(); await poHomeChannel.tabs.members.showAllUsers(); await poHomeChannel.tabs.members.muteUser('user1'); @@ -214,7 +214,7 @@ test.describe.serial('channel-management', () => { }); test('should unmuteUser user1', async () => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await poHomeChannel.tabs.btnTabMembers.click(); await poHomeChannel.tabs.members.showAllUsers(); await poHomeChannel.tabs.members.unmuteUser('user1'); @@ -228,7 +228,7 @@ test.describe.serial('channel-management', () => { }); test('should set user1 as moderator', async () => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await poHomeChannel.tabs.btnTabMembers.click(); await poHomeChannel.tabs.members.showAllUsers(); await poHomeChannel.tabs.members.setUserAsModerator('user1'); @@ -243,7 +243,7 @@ test.describe.serial('channel-management', () => { }); test('should set user1 as owner', async ({ browser }) => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await poHomeChannel.tabs.btnTabMembers.click(); await poHomeChannel.tabs.members.showAllUsers(); await poHomeChannel.tabs.members.setUserAsOwner('user1'); @@ -264,7 +264,7 @@ test.describe.serial('channel-management', () => { }); test('should ignore user1 messages', async () => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await poHomeChannel.tabs.btnTabMembers.click(); await poHomeChannel.tabs.members.showAllUsers(); await poHomeChannel.tabs.members.ignoreUser('user1'); @@ -281,14 +281,14 @@ test.describe.serial('channel-management', () => { }); test('should unignore single user1 message', async () => { - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); const user1Channel = new HomeChannel(user1Page); await user1Page.goto(`/channel/${targetChannel}`); await user1Channel.content.waitForChannel(); await user1Channel.content.sendMessage('only message to be unignored'); - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await expect(poHomeChannel.content.lastUserMessageBody).toContainText('This message was ignored'); await poHomeChannel.content.lastIgnoredUserMessage.click(); @@ -301,7 +301,7 @@ test.describe.serial('channel-management', () => { await user1Channel.content.waitForChannel(); await user1Channel.content.sendMessage('message before being unignored'); - await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.sidebar.openChat(targetChannel); await expect(poHomeChannel.content.lastUserMessageBody).toContainText('This message was ignored'); await poHomeChannel.tabs.btnTabMembers.click(); @@ -320,12 +320,12 @@ test.describe.serial('channel-management', () => { test('should readOnlyChannel show join button', async () => { const channelName = faker.string.uuid(); - await poHomeChannel.sidenav.openNewByLabel('Channel'); - await poHomeChannel.sidenav.inputChannelName.fill(channelName); - await poHomeChannel.sidenav.checkboxPrivateChannel.click(); - await poHomeChannel.sidenav.advancedSettingsAccordion.click(); - await poHomeChannel.sidenav.checkboxReadOnly.click(); - await poHomeChannel.sidenav.btnCreate.click(); + await poHomeChannel.sidebar.openCreateNewByLabel('Channel'); + await poHomeChannel.createRoomModal.inputChannelName.fill(channelName); + await poHomeChannel.createRoomModal.checkboxPrivate.click(); + await poHomeChannel.createRoomModal.advancedSettingsAccordion.click(); + await poHomeChannel.createRoomModal.checkboxReadOnly.click(); + await poHomeChannel.createRoomModal.btnCreate.click(); const channel = new HomeChannel(user1Page); diff --git a/apps/meteor/tests/e2e/page-objects/fragments/home-content.ts b/apps/meteor/tests/e2e/page-objects/fragments/home-content.ts index e33b3a3ecff2..a103ee895b14 100644 --- a/apps/meteor/tests/e2e/page-objects/fragments/home-content.ts +++ b/apps/meteor/tests/e2e/page-objects/fragments/home-content.ts @@ -63,6 +63,10 @@ export class HomeContent { return this.page.locator('role=button[name="Join"]'); } + getRoomTopic(topic: string): Locator { + return this.page.getByRole('note').filter({ hasText: topic }); + } + async openRoomInfo(): Promise { await this.channelHeader.locator('button[data-qa-id="ToolBoxAction-info-circled"]').click(); } @@ -400,9 +404,10 @@ export class HomeContent { } async waitForChannel(): Promise { - await this.page.locator('role=main').waitFor(); - await this.page.locator('role=main >> role=heading[level=1]').waitFor(); + await this.page.getByRole('main').waitFor(); + await this.page.getByRole('main').getByRole('heading', { level: 1 }).waitFor(); + await this.page.getByRole('main').getByRole('list', { name: 'Message list' }).waitFor(); - await expect(this.page.locator('role=main >> role=list')).not.toHaveAttribute('aria-busy', 'true'); + await expect(this.page.getByRole('main').getByRole('list', { name: 'Message list' })).not.toHaveAttribute('aria-busy', 'true'); } } From d37ad91221a6a5c3d926c86f3b1f850cc8f4a49a Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Thu, 5 Dec 2024 16:44:00 -0300 Subject: [PATCH 16/24] test: `team-management` --- .../fragments/home-flextab-channels.ts | 9 ++ apps/meteor/tests/e2e/team-management.spec.ts | 152 ++++++++++-------- 2 files changed, 90 insertions(+), 71 deletions(-) diff --git a/apps/meteor/tests/e2e/page-objects/fragments/home-flextab-channels.ts b/apps/meteor/tests/e2e/page-objects/fragments/home-flextab-channels.ts index b7040c9bd279..6bc81f3558a4 100644 --- a/apps/meteor/tests/e2e/page-objects/fragments/home-flextab-channels.ts +++ b/apps/meteor/tests/e2e/page-objects/fragments/home-flextab-channels.ts @@ -31,11 +31,20 @@ export class HomeFlextabChannels { return this.channelsTab.getByRole('list'); } + get emptyChannelsList(): Locator { + return this.channelsTab.getByRole('heading', { name: 'No Channels on this Team' }); + } + channelOption(name: string) { return this.channelsTab.locator('li', { hasText: name }); } + async waitForList() { + await this.channelsList.waitFor(); + } + async openChannelOptionMoreActions(name: string) { + await this.waitForList(); await this.channelOption(name).hover(); await this.channelOption(name).locator('role=button[name="More"]').click(); } diff --git a/apps/meteor/tests/e2e/team-management.spec.ts b/apps/meteor/tests/e2e/team-management.spec.ts index 8f365a84558c..2a9abcf1cd97 100644 --- a/apps/meteor/tests/e2e/team-management.spec.ts +++ b/apps/meteor/tests/e2e/team-management.spec.ts @@ -2,7 +2,7 @@ import { faker } from '@faker-js/faker'; import { Users } from './fixtures/userStates'; import { HomeTeam } from './page-objects'; -import { createTargetChannel } from './utils'; +import { createTargetChannel, deleteTeam, deleteChannel, createTargetTeam } from './utils'; import { expect, test } from './utils/test'; test.use({ storageState: Users.admin.state }); @@ -10,7 +10,8 @@ test.use({ storageState: Users.admin.state }); test.describe.serial('teams-management', () => { let poHomeTeam: HomeTeam; let targetChannel: string; - const targetTeam = faker.string.uuid(); + let targetTeam: string; + const targetTeamName = faker.string.uuid(); const targetTeamNonPrivate = faker.string.uuid(); const targetTeamReadOnly = faker.string.uuid(); const targetGroupNameInTeam = faker.string.uuid(); @@ -18,9 +19,18 @@ test.describe.serial('teams-management', () => { test.beforeAll(async ({ api }) => { targetChannel = await createTargetChannel(api); + targetTeam = await createTargetTeam(api); }); test.afterAll(async ({ api }) => { + await deleteChannel(api, targetChannel); + await deleteTeam(api, targetTeam); + await deleteTeam(api, targetTeamName); + await deleteTeam(api, targetTeamNonPrivate); + await deleteTeam(api, targetTeamReadOnly); + await deleteChannel(api, targetChannelNameInTeam); + await deleteChannel(api, targetGroupNameInTeam); + await api.post('/permissions.update', { permissions: [ { _id: 'move-room-to-team', roles: ['admin', 'owner', 'moderator'] }, @@ -39,45 +49,45 @@ test.describe.serial('teams-management', () => { }); test('should create targetTeam private', async ({ page }) => { - await poHomeTeam.sidenav.openNewByLabel('Team'); - await poHomeTeam.inputTeamName.fill(targetTeam); + await poHomeTeam.sidebar.openCreateNewByLabel('Team'); + await poHomeTeam.createRoomModal.inputTeamName.fill(targetTeamName); await poHomeTeam.addMember('user1'); - await poHomeTeam.btnTeamCreate.click(); + await poHomeTeam.createRoomModal.btnCreate.click(); - await expect(page).toHaveURL(`/group/${targetTeam}`); + await expect(page).toHaveURL(`/group/${targetTeamName}`); }); test('should create targetTeamNonPrivate non private', async ({ page }) => { - await poHomeTeam.sidenav.openNewByLabel('Team'); - await poHomeTeam.inputTeamName.fill(targetTeamNonPrivate); - await poHomeTeam.textPrivate.click(); + await poHomeTeam.sidebar.openCreateNewByLabel('Team'); + await poHomeTeam.createRoomModal.inputTeamName.fill(targetTeamNonPrivate); + await poHomeTeam.createRoomModal.checkboxPrivate.click(); await poHomeTeam.addMember('user1'); - await poHomeTeam.btnTeamCreate.click(); + await poHomeTeam.createRoomModal.btnCreate.click(); await expect(page).toHaveURL(`/channel/${targetTeamNonPrivate}`); }); test('should create targetTeamReadOnly readonly', async ({ page }) => { - await poHomeTeam.sidenav.openNewByLabel('Team'); - await poHomeTeam.inputTeamName.fill(targetTeamReadOnly); - await poHomeTeam.sidenav.advancedSettingsAccordion.click(); - await poHomeTeam.textReadOnly.click(); + await poHomeTeam.sidebar.openCreateNewByLabel('Team'); + await poHomeTeam.createRoomModal.inputTeamName.fill(targetTeamReadOnly); + await poHomeTeam.createRoomModal.advancedSettingsAccordion.click(); + await poHomeTeam.createRoomModal.checkboxReadOnly.click(); await poHomeTeam.addMember('user1'); - await poHomeTeam.btnTeamCreate.click(); + await poHomeTeam.createRoomModal.btnCreate.click(); await expect(page).toHaveURL(`/group/${targetTeamReadOnly}`); }); test('should throw validation error if team name already exists', async () => { - await poHomeTeam.sidenav.openNewByLabel('Team'); - await poHomeTeam.inputTeamName.fill(targetTeam); - await poHomeTeam.btnTeamCreate.click(); + await poHomeTeam.sidebar.openCreateNewByLabel('Team'); + await poHomeTeam.createRoomModal.inputTeamName.fill(targetTeamName); + await poHomeTeam.createRoomModal.btnCreate.click(); await expect(poHomeTeam.inputTeamName).toHaveAttribute('aria-invalid', 'true'); }); test('should send hello in the targetTeam and reply in a thread', async ({ page }) => { - await poHomeTeam.sidenav.openChat(targetTeam); + await poHomeTeam.sidebar.openChat(targetTeam); await poHomeTeam.content.sendMessage('hello'); await page.locator('[data-qa-type="message"]').last().hover(); @@ -88,7 +98,7 @@ test.describe.serial('teams-management', () => { }); test('should set targetTeam as readonly', async () => { - await poHomeTeam.sidenav.openChat(targetTeam); + await poHomeTeam.sidebar.openChat(targetTeam); await poHomeTeam.tabs.btnRoomInfo.click(); await poHomeTeam.tabs.room.btnEdit.click(); await poHomeTeam.tabs.room.advancedSettingsAccordion.click(); @@ -103,7 +113,7 @@ test.describe.serial('teams-management', () => { 200, ); - await poHomeTeam.sidenav.openChat(targetTeam); + await poHomeTeam.sidebar.openChat(targetTeam); await poHomeTeam.tabs.btnChannels.click(); await expect(poHomeTeam.tabs.channels.btnAddExisting).not.toBeVisible(); }); @@ -122,12 +132,12 @@ test.describe.serial('teams-management', () => { ).status(), ).toBe(200); - await poHomeTeam.sidenav.openChat(targetTeam); + await poHomeTeam.sidebar.openChat(targetTeam); await poHomeTeam.tabs.btnChannels.click(); await expect(poHomeTeam.tabs.channels.btnCreateNew).not.toBeVisible(); }); - test('should allow creating a channel in a team if user has the create-team-channel permission, but not the create-team-group permission', async ({ + test.skip('should allow creating a channel in a team if user has the create-team-channel permission, but not the create-team-group permission', async ({ api, }) => { expect( @@ -141,19 +151,19 @@ test.describe.serial('teams-management', () => { ).status(), ).toBe(200); - await poHomeTeam.sidenav.openChat(targetTeam); + await poHomeTeam.sidebar.openChat(targetTeam); await poHomeTeam.tabs.btnChannels.click(); await expect(poHomeTeam.tabs.channels.btnCreateNew).toBeVisible(); await poHomeTeam.tabs.channels.btnCreateNew.click(); - await poHomeTeam.sidenav.inputChannelName.type(targetChannelNameInTeam); - await expect(poHomeTeam.sidenav.checkboxPrivateChannel).not.toBeChecked(); - await expect(poHomeTeam.sidenav.checkboxPrivateChannel).toBeDisabled(); - await poHomeTeam.sidenav.btnCreate.click(); + await poHomeTeam.createRoomModal.inputChannelName.fill(targetChannelNameInTeam); + await expect(poHomeTeam.createRoomModal.checkboxPrivate).not.toBeChecked(); + await expect(poHomeTeam.createRoomModal.checkboxPrivate).toBeDisabled(); + await poHomeTeam.createRoomModal.btnCreate.click(); await expect(poHomeTeam.tabs.channels.channelsList).toContainText(targetChannelNameInTeam); }); - test('should allow creating a group in a team if user has the create-team-group permission, but not the create-team-channel permission', async ({ + test.skip('should allow creating a group in a team if user has the create-team-group permission, but not the create-team-channel permission', async ({ api, }) => { expect( @@ -167,14 +177,14 @@ test.describe.serial('teams-management', () => { ).status(), ).toBe(200); - await poHomeTeam.sidenav.openChat(targetTeam); + await poHomeTeam.sidebar.openChat(targetTeam); await poHomeTeam.tabs.btnChannels.click(); await expect(poHomeTeam.tabs.channels.btnCreateNew).toBeVisible(); await poHomeTeam.tabs.channels.btnCreateNew.click(); - await poHomeTeam.sidenav.inputChannelName.type(targetGroupNameInTeam); - await expect(poHomeTeam.sidenav.checkboxPrivateChannel).toBeChecked(); - await expect(poHomeTeam.sidenav.checkboxPrivateChannel).toBeDisabled(); - await poHomeTeam.sidenav.btnCreate.click(); + await poHomeTeam.createRoomModal.inputChannelName.type(targetGroupNameInTeam); + await expect(poHomeTeam.createRoomModal.checkboxPrivate).toBeChecked(); + await expect(poHomeTeam.createRoomModal.checkboxPrivate).toBeDisabled(); + await poHomeTeam.createRoomModal.btnCreate.click(); await expect(poHomeTeam.tabs.channels.channelsList).toContainText(targetGroupNameInTeam); }); @@ -182,7 +192,7 @@ test.describe.serial('teams-management', () => { test('should move targetChannel to targetTeam', async ({ page, api }) => { expect((await api.post('/permissions.update', { permissions: [{ _id: 'move-room-to-team', roles: ['owner'] }] })).status()).toBe(200); - await poHomeTeam.sidenav.openChat(targetTeam); + await poHomeTeam.sidebar.openChat(targetTeam); await poHomeTeam.tabs.btnChannels.click(); await poHomeTeam.tabs.channels.btnAddExisting.click(); await poHomeTeam.tabs.channels.inputChannels.fill(targetChannel); @@ -193,7 +203,7 @@ test.describe.serial('teams-management', () => { }); test('should access team channel through targetTeam header', async ({ page }) => { - await poHomeTeam.sidenav.openChat(targetChannel); + await poHomeTeam.sidebar.openChat(targetChannel); await page.getByRole('button', { name: targetChannel }).first().focus(); await page.keyboard.press('Tab'); await page.keyboard.press('Tab'); @@ -210,23 +220,23 @@ test.describe.serial('teams-management', () => { 200, ); - await poHomeTeam.sidenav.openChat(targetTeam); + await poHomeTeam.sidebar.openChat(targetTeam); await poHomeTeam.tabs.btnChannels.click(); - await poHomeTeam.tabs.channels.openChannelOptionMoreActions(targetGroupNameInTeam); + await poHomeTeam.tabs.channels.openChannelOptionMoreActions(targetChannel); await expect(page.getByRole('menu', { exact: true }).getByRole('menuitem', { name: 'Remove from team' })).not.toBeVisible(); }); test('should allow removing a targetGroup from targetTeam if user has the remove-team-channel permission', async ({ page, api }) => { expect((await api.post('/permissions.update', { permissions: [{ _id: 'remove-team-channel', roles: ['owner'] }] })).status()).toBe(200); - await poHomeTeam.sidenav.openChat(targetTeam); + await poHomeTeam.sidebar.openChat(targetTeam); await poHomeTeam.tabs.btnChannels.click(); - await poHomeTeam.tabs.channels.openChannelOptionMoreActions(targetGroupNameInTeam); + await poHomeTeam.tabs.channels.openChannelOptionMoreActions(targetChannel); await expect(page.getByRole('menu', { exact: true }).getByRole('menuitem', { name: 'Remove from team' })).toBeVisible(); await page.getByRole('menu', { exact: true }).getByRole('menuitem', { name: 'Remove from team' }).click(); await poHomeTeam.tabs.channels.confirmRemoveChannel(); - await expect(poHomeTeam.tabs.channels.channelsList).not.toContainText(targetGroupNameInTeam); + await expect(poHomeTeam.tabs.channels.channelsTab).not.toContainText(targetChannel); }); test('should not allow deleting a targetGroup from targetTeam if the group owner does not have the delete-team-group permission', async ({ @@ -245,16 +255,16 @@ test.describe.serial('teams-management', () => { ).toBe(200); // re-add channel to team - await poHomeTeam.sidenav.openChat(targetTeam); + await poHomeTeam.sidebar.openChat(targetTeam); await poHomeTeam.tabs.btnChannels.click(); await poHomeTeam.tabs.channels.btnAddExisting.click(); - await poHomeTeam.tabs.channels.inputChannels.fill(targetGroupNameInTeam); - await page.locator(`.rcx-option__content:has-text("${targetGroupNameInTeam}")`).click(); + await poHomeTeam.tabs.channels.inputChannels.fill(targetChannel); + await page.locator(`.rcx-option__content:has-text("${targetChannel}")`).click(); await poHomeTeam.tabs.channels.btnAdd.click(); - await expect(poHomeTeam.tabs.channels.channelsList).toContainText(targetGroupNameInTeam); + await expect(poHomeTeam.tabs.channels.channelsList).toContainText(targetChannel); // try to delete group in team - await poHomeTeam.tabs.channels.openChannelOptionMoreActions(targetGroupNameInTeam); + await poHomeTeam.tabs.channels.openChannelOptionMoreActions(targetChannel); await expect(page.getByRole('menu', { exact: true }).getByRole('menuitem', { name: 'Delete' })).not.toBeVisible(); }); @@ -264,16 +274,16 @@ test.describe.serial('teams-management', () => { }) => { expect((await api.post('/permissions.update', { permissions: [{ _id: 'delete-team-group', roles: ['owner'] }] })).status()).toBe(200); - await poHomeTeam.sidenav.openChat(targetTeam); + await poHomeTeam.sidebar.openChat(targetTeam); await poHomeTeam.tabs.btnChannels.click(); - await poHomeTeam.tabs.channels.openChannelOptionMoreActions(targetGroupNameInTeam); + await poHomeTeam.tabs.channels.openChannelOptionMoreActions(targetChannel); await expect(page.getByRole('menu', { exact: true }).getByRole('menuitem', { name: 'Delete' })).toBeVisible(); await page.getByRole('menu', { exact: true }).getByRole('menuitem', { name: 'Delete' }).click(); await poHomeTeam.tabs.channels.confirmDeleteRoom(); - await poHomeTeam.sidenav.openChat(targetTeam); + await poHomeTeam.sidebar.openChat(targetTeam); await poHomeTeam.tabs.btnChannels.click(); - await expect(poHomeTeam.tabs.channels.channelsList).not.toContainText(targetGroupNameInTeam); + await expect(poHomeTeam.tabs.channels.channelsList).not.toContainText(targetChannel); }); test('should not allow removing a targetChannel from targetTeam if user does not have the remove-team-channel permission', async ({ @@ -284,23 +294,23 @@ test.describe.serial('teams-management', () => { 200, ); - await poHomeTeam.sidenav.openChat(targetTeam); + await poHomeTeam.sidebar.openChat(targetTeam); await poHomeTeam.tabs.btnChannels.click(); - await poHomeTeam.tabs.channels.openChannelOptionMoreActions(targetChannelNameInTeam); + await poHomeTeam.tabs.channels.openChannelOptionMoreActions(targetChannel); await expect(page.getByRole('menu', { exact: true }).getByRole('menuitem', { name: 'Remove from team' })).not.toBeVisible(); }); test('should allow removing a targetChannel from targetTeam if user has the remove-team-channel permission', async ({ page, api }) => { expect((await api.post('/permissions.update', { permissions: [{ _id: 'remove-team-channel', roles: ['owner'] }] })).status()).toBe(200); - await poHomeTeam.sidenav.openChat(targetTeam); + await poHomeTeam.sidebar.openChat(targetTeam); await poHomeTeam.tabs.btnChannels.click(); - await poHomeTeam.tabs.channels.openChannelOptionMoreActions(targetChannelNameInTeam); + await poHomeTeam.tabs.channels.openChannelOptionMoreActions(targetChannel); await expect(page.getByRole('menu', { exact: true }).getByRole('menuitem', { name: 'Remove from team' })).toBeVisible(); await page.getByRole('menu', { exact: true }).getByRole('menuitem', { name: 'Remove from team' }).click(); await poHomeTeam.tabs.channels.confirmRemoveChannel(); - await expect(poHomeTeam.tabs.channels.channelsList).not.toContainText(targetChannelNameInTeam); + await expect(poHomeTeam.tabs.channels.channelsList).not.toContainText(targetChannel); }); test('should not allow deleting a targetChannel from targetTeam if the channel owner does not have the delete-team-channel permission', async ({ @@ -319,16 +329,16 @@ test.describe.serial('teams-management', () => { ).toBe(200); // re-add channel to team - await poHomeTeam.sidenav.openChat(targetTeam); + await poHomeTeam.sidebar.openChat(targetTeam); await poHomeTeam.tabs.btnChannels.click(); await poHomeTeam.tabs.channels.btnAddExisting.click(); - await poHomeTeam.tabs.channels.inputChannels.fill(targetChannelNameInTeam); - await page.locator(`.rcx-option__content:has-text("${targetChannelNameInTeam}")`).click(); + await poHomeTeam.tabs.channels.inputChannels.fill(targetChannel); + await page.locator(`.rcx-option__content:has-text("${targetChannel}")`).click(); await poHomeTeam.tabs.channels.btnAdd.click(); - await expect(poHomeTeam.tabs.channels.channelsList).toContainText(targetChannelNameInTeam); + await expect(poHomeTeam.tabs.channels.channelsList).toContainText(targetChannel); // try to delete channel in team - await poHomeTeam.tabs.channels.openChannelOptionMoreActions(targetChannelNameInTeam); + await poHomeTeam.tabs.channels.openChannelOptionMoreActions(targetChannel); await expect(page.getByRole('menu', { exact: true }).getByRole('menuitem', { name: 'Delete' })).not.toBeVisible(); }); @@ -338,22 +348,22 @@ test.describe.serial('teams-management', () => { }) => { expect((await api.post('/permissions.update', { permissions: [{ _id: 'delete-team-channel', roles: ['owner'] }] })).status()).toBe(200); - await poHomeTeam.sidenav.openChat(targetTeam); + await poHomeTeam.sidebar.openChat(targetTeam); await poHomeTeam.tabs.btnChannels.click(); - await poHomeTeam.tabs.channels.openChannelOptionMoreActions(targetChannelNameInTeam); + await poHomeTeam.tabs.channels.openChannelOptionMoreActions(targetChannel); await expect(page.getByRole('menu', { exact: true }).getByRole('menuitem', { name: 'Delete' })).toBeVisible(); await page.getByRole('menu', { exact: true }).getByRole('menuitem', { name: 'Delete' }).click(); await poHomeTeam.tabs.channels.confirmDeleteRoom(); - await poHomeTeam.sidenav.openChat(targetTeam); + await poHomeTeam.sidebar.openChat(targetTeam); await poHomeTeam.tabs.btnChannels.click(); - await expect(poHomeTeam.tabs.channels.channelsList).not.toContainText(targetChannelNameInTeam); + await expect(poHomeTeam.tabs.channels.channelsList).not.toContainText(targetChannel); }); test('should remove targetChannel from targetTeam', async ({ page, api }) => { expect((await api.post('/permissions.update', { permissions: [{ _id: 'remove-team-channel', roles: ['owner'] }] })).status()).toBe(200); - await poHomeTeam.sidenav.openChat(targetTeam); + await poHomeTeam.sidebar.openChat(targetTeam); await poHomeTeam.tabs.btnChannels.click(); await poHomeTeam.tabs.channels.openChannelOptionMoreActions(targetChannel); await page.getByRole('menu', { exact: true }).getByRole('menuitem', { name: 'Remove from team' }).click(); @@ -363,7 +373,7 @@ test.describe.serial('teams-management', () => { }); test('should remove user1 from targetTeamNonPrivate', async () => { - await poHomeTeam.sidenav.openChat(targetTeamNonPrivate); + await poHomeTeam.sidebar.openChat(targetTeamNonPrivate); await poHomeTeam.tabs.kebab.click({ force: true }); await poHomeTeam.tabs.btnTeamMembers.click(); await poHomeTeam.tabs.members.showAllUsers(); @@ -376,14 +386,14 @@ test.describe.serial('teams-management', () => { }); test('should delete targetTeamNonPrivate', async () => { - await poHomeTeam.sidenav.openChat(targetTeamNonPrivate); + await poHomeTeam.sidebar.openChat(targetTeamNonPrivate); await poHomeTeam.tabs.btnRoomInfo.click(); await poHomeTeam.tabs.room.btnDelete.click(); await expect(poHomeTeam.tabs.room.confirmDeleteTeamModal).toBeVisible(); await poHomeTeam.tabs.room.confirmDeleteTeam(); - await poHomeTeam.sidenav.searchRoom(targetTeamNonPrivate); - await expect(poHomeTeam.sidenav.getSearchRoomByName(targetTeamNonPrivate)).not.toBeVisible(); + await poHomeTeam.sidebar.typeSearch(targetTeamNonPrivate); + await expect(poHomeTeam.sidebar.getSearchRoomByName(targetTeamNonPrivate)).not.toBeVisible(); }); test('should user1 leave from targetTeam', async ({ browser }) => { @@ -399,7 +409,7 @@ test.describe.serial('teams-management', () => { await user1Channel.tabs.room.confirmLeave(); await user1Page.close(); - await poHomeTeam.sidenav.openChat(targetTeam); + await poHomeTeam.sidebar.openChat(targetTeam); await poHomeTeam.tabs.kebab.click({ force: true }); await poHomeTeam.tabs.btnTeamMembers.click(); await poHomeTeam.tabs.members.showAllUsers(); @@ -407,7 +417,7 @@ test.describe.serial('teams-management', () => { }); test('should convert team into a channel', async ({ page }) => { - await poHomeTeam.sidenav.openChat(targetTeam); + await poHomeTeam.sidebar.openChat(targetTeam); await poHomeTeam.tabs.btnRoomInfo.click(); await poHomeTeam.tabs.room.btnMore.click(); await page.getByRole('listbox', { exact: true }).getByRole('option', { name: 'Convert to Channel' }).click(); From e41fb9fc00e1862eb6fd4c4f20ff191686cf620e Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Thu, 5 Dec 2024 16:45:50 -0300 Subject: [PATCH 17/24] test: `e2e-encryption` --- apps/meteor/tests/e2e/e2e-encryption.spec.ts | 138 +++++++++---------- 1 file changed, 68 insertions(+), 70 deletions(-) diff --git a/apps/meteor/tests/e2e/e2e-encryption.spec.ts b/apps/meteor/tests/e2e/e2e-encryption.spec.ts index 04d01d5a7c71..847b627a9431 100644 --- a/apps/meteor/tests/e2e/e2e-encryption.spec.ts +++ b/apps/meteor/tests/e2e/e2e-encryption.spec.ts @@ -60,7 +60,7 @@ test.describe.serial('e2e-encryption initial setup', () => { await expect(page.locator('role=banner >> text="Save your encryption password"')).not.toBeVisible(); - await poHomeChannel.sidenav.logout(); + await poHomeChannel.navbar.logout(); await page.locator('role=button[name="Login"]').waitFor(); @@ -92,7 +92,7 @@ test.describe.serial('e2e-encryption initial setup', () => { await poAccountProfile.btnClose.click(); - await poHomeChannel.sidenav.logout(); + await poHomeChannel.navbar.logout(); await page.locator('role=button[name="Login"]').waitFor(); @@ -121,7 +121,7 @@ test.describe.serial('e2e-encryption initial setup', () => { const channelName = faker.string.uuid(); - await poHomeChannel.sidenav.createEncryptedChannel(channelName); + await poHomeChannel.sidebar.createEncryptedChannel(channelName); await expect(page).toHaveURL(`/group/${channelName}`); @@ -135,12 +135,12 @@ test.describe.serial('e2e-encryption initial setup', () => { await expect(poHomeChannel.content.lastUserMessage.locator('.rcx-icon--name-key')).toBeVisible(); // Logout and login - await poHomeChannel.sidenav.logout(); + await poHomeChannel.navbar.logout(); await page.locator('role=button[name="Login"]').waitFor(); await injectInitialData(); await restoreState(page, Users.admin, { except: ['private_key', 'public_key'] }); - await poHomeChannel.sidenav.openChat(channelName); + await poHomeChannel.sidebar.openChat(channelName); await expect(poHomeChannel.content.encryptedRoomHeaderIcon).toBeVisible(); @@ -160,9 +160,9 @@ test.describe.serial('e2e-encryption initial setup', () => { const channelName = faker.string.uuid(); - await poHomeChannel.sidenav.createEncryptedChannel(channelName); + await poHomeChannel.sidebar.createEncryptedChannel(channelName); - await poHomeChannel.sidenav.openChat(channelName); + await poHomeChannel.sidebar.openChat(channelName); await poHomeChannel.content.dragAndDropTxtFile(); await poHomeChannel.content.descriptionInput.fill('any_description'); @@ -215,14 +215,14 @@ test.describe.serial('e2e-encryption initial setup', () => { }); // Logout to remove e2ee keys - await poHomeChannel.sidenav.logout(); + await poHomeChannel.navbar.logout(); // Login again await page.locator('role=button[name="Login"]').waitFor(); await injectInitialData(); await restoreState(page, Users.admin, { except: ['private_key', 'public_key'] }); - await poHomeChannel.sidenav.openChat(channelName); + await poHomeChannel.sidebar.openChat(channelName); await expect(poHomeChannel.content.encryptedRoomHeaderIcon).toBeVisible(); @@ -257,7 +257,7 @@ test.describe.serial('e2e-encryption', () => { test('expect create a private channel encrypted and send an encrypted message', async ({ page }) => { const channelName = faker.string.uuid(); - await poHomeChannel.sidenav.createEncryptedChannel(channelName); + await poHomeChannel.sidebar.createEncryptedChannel(channelName); await expect(page).toHaveURL(`/group/${channelName}`); @@ -301,7 +301,7 @@ test.describe.serial('e2e-encryption', () => { test('expect create a private encrypted channel and send a encrypted thread message', async ({ page }) => { const channelName = faker.string.uuid(); - await poHomeChannel.sidenav.createEncryptedChannel(channelName); + await poHomeChannel.sidebar.createEncryptedChannel(channelName); await expect(page).toHaveURL(`/group/${channelName}`); @@ -335,7 +335,7 @@ test.describe.serial('e2e-encryption', () => { test('expect create a private encrypted channel and check disabled message menu actions on an encrypted message', async ({ page }) => { const channelName = faker.string.uuid(); - await poHomeChannel.sidenav.createEncryptedChannel(channelName); + await poHomeChannel.sidebar.createEncryptedChannel(channelName); await expect(page).toHaveURL(`/group/${channelName}`); @@ -360,9 +360,9 @@ test.describe.serial('e2e-encryption', () => { test('expect create a private channel, encrypt it and send an encrypted message', async ({ page }) => { const channelName = faker.string.uuid(); - await poHomeChannel.sidenav.openNewByLabel('Channel'); - await poHomeChannel.sidenav.inputChannelName.fill(channelName); - await poHomeChannel.sidenav.btnCreate.click(); + await poHomeChannel.sidebar.openCreateNewByLabel('Channel'); + await poHomeChannel.createRoomModal.inputChannelName.fill(channelName); + await poHomeChannel.createRoomModal.btnCreate.click(); await expect(page).toHaveURL(`/group/${channelName}`); @@ -388,7 +388,7 @@ test.describe.serial('e2e-encryption', () => { test('expect create a encrypted private channel and mention user', async ({ page }) => { const channelName = faker.string.uuid(); - await poHomeChannel.sidenav.createEncryptedChannel(channelName); + await poHomeChannel.sidebar.createEncryptedChannel(channelName); await expect(page).toHaveURL(`/group/${channelName}`); @@ -398,7 +398,7 @@ test.describe.serial('e2e-encryption', () => { await poHomeChannel.content.sendMessage('hello @user1'); - const userMention = await page.getByRole('button', { + const userMention = page.getByRole('button', { name: 'user1', }); @@ -408,7 +408,7 @@ test.describe.serial('e2e-encryption', () => { test('expect create a encrypted private channel, mention a channel and navigate to it', async ({ page }) => { const channelName = faker.string.uuid(); - await poHomeChannel.sidenav.createEncryptedChannel(channelName); + await poHomeChannel.sidebar.createEncryptedChannel(channelName); await expect(page).toHaveURL(`/group/${channelName}`); @@ -432,7 +432,7 @@ test.describe.serial('e2e-encryption', () => { test('expect create a encrypted private channel, mention a channel and user', async ({ page }) => { const channelName = faker.string.uuid(); - await poHomeChannel.sidenav.createEncryptedChannel(channelName); + await poHomeChannel.sidebar.createEncryptedChannel(channelName); await expect(page).toHaveURL(`/group/${channelName}`); @@ -457,9 +457,9 @@ test.describe.serial('e2e-encryption', () => { test('should encrypted field be available on edit room', async ({ page }) => { const channelName = faker.string.uuid(); - await poHomeChannel.sidenav.openNewByLabel('Channel'); - await poHomeChannel.sidenav.inputChannelName.fill(channelName); - await poHomeChannel.sidenav.btnCreate.click(); + await poHomeChannel.sidebar.openCreateNewByLabel('Channel'); + await poHomeChannel.createRoomModal.inputChannelName.fill(channelName); + await poHomeChannel.createRoomModal.btnCreate.click(); await expect(page).toHaveURL(`/group/${channelName}`); @@ -475,12 +475,12 @@ test.describe.serial('e2e-encryption', () => { }); test('expect create a Direct message, encrypt it and attempt to enable OTR', async ({ page }) => { - await poHomeChannel.sidenav.openNewByLabel('Direct message'); - await poHomeChannel.sidenav.inputDirectUsername.click(); + await poHomeChannel.sidebar.openCreateNewByLabel('Direct message'); + await poHomeChannel.createRoomModal.inputDirectUsernames.click(); await page.keyboard.type('user2'); await page.waitForTimeout(1000); await page.keyboard.press('Enter'); - await poHomeChannel.sidenav.btnCreate.click(); + await poHomeChannel.createRoomModal.btnCreate.click(); await expect(page).toHaveURL(`/direct/user2${Users.userE2EE.data.username}`); @@ -512,11 +512,11 @@ test.describe.serial('e2e-encryption', () => { await test.step('create an encrypted channel', async () => { const channelName = faker.string.uuid(); - await poHomeChannel.sidenav.openNewByLabel('Channel'); - await poHomeChannel.sidenav.inputChannelName.fill(channelName); - await poHomeChannel.sidenav.advancedSettingsAccordion.click(); - await poHomeChannel.sidenav.checkboxEncryption.click(); - await poHomeChannel.sidenav.btnCreate.click(); + await poHomeChannel.sidebar.openCreateNewByLabel('Channel'); + await poHomeChannel.createRoomModal.inputChannelName.fill(channelName); + await poHomeChannel.createRoomModal.advancedSettingsAccordion.click(); + await poHomeChannel.createRoomModal.checkboxEncryption.click(); + await poHomeChannel.createRoomModal.btnCreate.click(); await expect(page).toHaveURL(`/group/${channelName}`); @@ -541,11 +541,11 @@ test.describe.serial('e2e-encryption', () => { await test.step('create an encrypted room', async () => { const channelName = faker.string.uuid(); - await poHomeChannel.sidenav.openNewByLabel('Channel'); - await poHomeChannel.sidenav.inputChannelName.fill(channelName); - await poHomeChannel.sidenav.advancedSettingsAccordion.click(); - await poHomeChannel.sidenav.checkboxEncryption.click(); - await poHomeChannel.sidenav.btnCreate.click(); + await poHomeChannel.sidebar.openCreateNewByLabel('Channel'); + await poHomeChannel.createRoomModal.inputChannelName.fill(channelName); + await poHomeChannel.createRoomModal.advancedSettingsAccordion.click(); + await poHomeChannel.createRoomModal.checkboxEncryption.click(); + await poHomeChannel.createRoomModal.btnCreate.click(); await expect(page).toHaveURL(`/group/${channelName}`); @@ -611,11 +611,11 @@ test.describe.serial('e2e-encryption', () => { await test.step('create an encrypted channel', async () => { const channelName = faker.string.uuid(); - await poHomeChannel.sidenav.openNewByLabel('Channel'); - await poHomeChannel.sidenav.inputChannelName.fill(channelName); - await poHomeChannel.sidenav.advancedSettingsAccordion.click(); - await poHomeChannel.sidenav.checkboxEncryption.click(); - await poHomeChannel.sidenav.btnCreate.click(); + await poHomeChannel.sidebar.openCreateNewByLabel('Channel'); + await poHomeChannel.createRoomModal.inputChannelName.fill(channelName); + await poHomeChannel.createRoomModal.advancedSettingsAccordion.click(); + await poHomeChannel.createRoomModal.checkboxEncryption.click(); + await poHomeChannel.createRoomModal.btnCreate.click(); await expect(page).toHaveURL(`/group/${channelName}`); @@ -649,7 +649,7 @@ test.describe.serial('e2e-encryption', () => { test.skip(!IS_EE, 'Premium Only'); const channelName = faker.string.uuid(); - await poHomeChannel.sidenav.createEncryptedChannel(channelName); + await poHomeChannel.sidebar.createEncryptedChannel(channelName); await expect(page).toHaveURL(`/group/${channelName}`); @@ -692,7 +692,7 @@ test.describe.serial('e2e-encryption', () => { test('expect slash commands to be disabled in an e2ee room', async ({ page }) => { const channelName = faker.string.uuid(); - await poHomeChannel.sidenav.createEncryptedChannel(channelName); + await poHomeChannel.sidebar.createEncryptedChannel(channelName); await expect(page).toHaveURL(`/group/${channelName}`); @@ -716,12 +716,12 @@ test.describe.serial('e2e-encryption', () => { const channelName = faker.string.uuid(); // Enable Sidebar Extended display mode - await poHomeChannel.sidenav.setDisplayMode('Extended'); + await poHomeChannel.sidebar.setDisplayMode('Extended'); // Create private channel - await poHomeChannel.sidenav.openNewByLabel('Channel'); - await poHomeChannel.sidenav.inputChannelName.fill(channelName); - await poHomeChannel.sidenav.btnCreate.click(); + await poHomeChannel.sidebar.openCreateNewByLabel('Channel'); + await poHomeChannel.createRoomModal.inputChannelName.fill(channelName); + await poHomeChannel.createRoomModal.btnCreate.click(); await expect(page).toHaveURL(`/group/${channelName}`); await expect(poHomeChannel.toastSuccess).toBeVisible(); await poHomeChannel.dismissToast(); @@ -752,7 +752,7 @@ test.describe.serial('e2e-encryption', () => { await page.locator('#modal-root .rcx-button-group--align-end .rcx-button--danger').click(); // Check last message in the sidebar - const sidebarChannel = await poHomeChannel.sidenav.getSidebarItemByName(channelName); + const sidebarChannel = poHomeChannel.sidebar.getSidebarItemByName(channelName); await expect(sidebarChannel).toBeVisible(); await expect(sidebarChannel.locator('span')).toContainText(encriptedMessage1); }); @@ -760,7 +760,7 @@ test.describe.serial('e2e-encryption', () => { test('expect create a private encrypted channel and pin/star an encrypted message', async ({ page }) => { const channelName = faker.string.uuid(); - await poHomeChannel.sidenav.createEncryptedChannel(channelName); + await poHomeChannel.sidebar.createEncryptedChannel(channelName); await expect(page).toHaveURL(`/group/${channelName}`); @@ -874,11 +874,11 @@ test.describe.serial('e2ee room setup', () => { const channelName = faker.string.uuid(); - await poHomeChannel.sidenav.openNewByLabel('Channel'); - await poHomeChannel.sidenav.inputChannelName.fill(channelName); - await poHomeChannel.sidenav.advancedSettingsAccordion.click(); - await poHomeChannel.sidenav.checkboxEncryption.click(); - await poHomeChannel.sidenav.btnCreate.click(); + await poHomeChannel.sidebar.openCreateNewByLabel('Channel'); + await poHomeChannel.createRoomModal.inputChannelName.fill(channelName); + await poHomeChannel.createRoomModal.advancedSettingsAccordion.click(); + await poHomeChannel.createRoomModal.checkboxEncryption.click(); + await poHomeChannel.createRoomModal.btnCreate.click(); await expect(page).toHaveURL(`/group/${channelName}`); @@ -916,7 +916,7 @@ test.describe.serial('e2ee room setup', () => { await page.goto('/home'); // Logout to remove e2ee keys - await poHomeChannel.sidenav.logout(); + await poHomeChannel.navbar.logout(); await page.locator('role=button[name="Login"]').waitFor(); @@ -925,11 +925,11 @@ test.describe.serial('e2ee room setup', () => { const channelName = faker.string.uuid(); - await poHomeChannel.sidenav.openNewByLabel('Channel'); - await poHomeChannel.sidenav.inputChannelName.fill(channelName); - await poHomeChannel.sidenav.advancedSettingsAccordion.click(); - await poHomeChannel.sidenav.checkboxEncryption.click(); - await poHomeChannel.sidenav.btnCreate.click(); + await poHomeChannel.sidebar.openCreateNewByLabel('Channel'); + await poHomeChannel.createRoomModal.inputChannelName.fill(channelName); + await poHomeChannel.createRoomModal.advancedSettingsAccordion.click(); + await poHomeChannel.createRoomModal.checkboxEncryption.click(); + await poHomeChannel.createRoomModal.btnCreate.click(); await expect(page).toHaveURL(`/group/${channelName}`); @@ -973,11 +973,11 @@ test.describe.serial('e2ee room setup', () => { const channelName = faker.string.uuid(); - await poHomeChannel.sidenav.openNewByLabel('Channel'); - await poHomeChannel.sidenav.inputChannelName.fill(channelName); - await poHomeChannel.sidenav.advancedSettingsAccordion.click(); - await poHomeChannel.sidenav.checkboxEncryption.click(); - await poHomeChannel.sidenav.btnCreate.click(); + await poHomeChannel.sidebar.openCreateNewByLabel('Channel'); + await poHomeChannel.createRoomModal.inputChannelName.fill(channelName); + await poHomeChannel.createRoomModal.advancedSettingsAccordion.click(); + await poHomeChannel.createRoomModal.checkboxEncryption.click(); + await poHomeChannel.createRoomModal.btnCreate.click(); await expect(page).toHaveURL(`/group/${channelName}`); @@ -990,8 +990,8 @@ test.describe.serial('e2ee room setup', () => { await expect(poHomeChannel.content.lastUserMessageBody).toHaveText('hello world'); await expect(poHomeChannel.content.lastUserMessage.locator('.rcx-icon--name-key')).toBeVisible(); - await poHomeChannel.sidenav.userProfileMenu.click(); - await poHomeChannel.sidenav.accountProfileOption.click(); + await poHomeChannel.navbar.userProfileMenu.click(); + await poHomeChannel.navbar.accountProfileOption.click(); await page.locator('role=navigation >> a:has-text("Security")').click(); @@ -1007,9 +1007,7 @@ test.describe.serial('e2ee room setup', () => { await injectInitialData(); await restoreState(page, Users.admin); - await page.locator('role=navigation >> role=button[name=Search]').click(); - await page.locator('role=search >> role=searchbox').fill(channelName); - await page.locator(`role=search >> role=listbox >> role=link >> text="${channelName}"`).click(); + await poHomeChannel.sidebar.openChat(channelName); await page.locator('role=button[name="Save E2EE password"]').click(); await page.locator('#modal-root >> button:has-text("I saved my password")').click(); @@ -1049,7 +1047,7 @@ test.describe('e2ee support legacy formats', () => { const channelName = faker.string.uuid(); - await poHomeChannel.sidenav.createEncryptedChannel(channelName); + await poHomeChannel.sidebar.createEncryptedChannel(channelName); await expect(page).toHaveURL(`/group/${channelName}`); From bc316d6a1859655dfaec73498b16bf762b7f9127 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Thu, 5 Dec 2024 18:14:24 -0300 Subject: [PATCH 18/24] feat: use only `ContextualbarV2` in `client/components/Contextualbar` --- .../Contextualbar/Contextualbar.tsx | 16 +++------------ .../Contextualbar/ContextualbarAction.tsx | 14 ++----------- .../Contextualbar/ContextualbarActions.tsx | 14 ++----------- .../Contextualbar/ContextualbarButton.tsx | 14 ++----------- .../Contextualbar/ContextualbarContent.tsx | 16 +++------------ .../ContextualbarEmptyContent.tsx | 16 +++------------ .../Contextualbar/ContextualbarFooter.tsx | 20 ++++--------------- .../Contextualbar/ContextualbarHeader.tsx | 17 +++------------- .../Contextualbar/ContextualbarIcon.tsx | 14 ++----------- .../Contextualbar/ContextualbarSection.tsx | 16 +++------------ .../Contextualbar/ContextualbarSkeleton.tsx | 14 ++----------- .../Contextualbar/ContextualbarTitle.tsx | 14 +++---------- 12 files changed, 32 insertions(+), 153 deletions(-) diff --git a/apps/meteor/client/components/Contextualbar/Contextualbar.tsx b/apps/meteor/client/components/Contextualbar/Contextualbar.tsx index 481537d23f3e..585c64dbda0f 100644 --- a/apps/meteor/client/components/Contextualbar/Contextualbar.tsx +++ b/apps/meteor/client/components/Contextualbar/Contextualbar.tsx @@ -1,19 +1,9 @@ -import { ContextualbarV2, Contextualbar as ContextualbarComponent } from '@rocket.chat/fuselage'; -import { FeaturePreview, FeaturePreviewOff, FeaturePreviewOn } from '@rocket.chat/ui-client'; +import { ContextualbarV2 } from '@rocket.chat/fuselage'; import type { ComponentProps } from 'react'; import React, { forwardRef, memo } from 'react'; -const Contextualbar = forwardRef>(function Contextualbar(props, ref) { - return ( - - - - - - - - - ); +const Contextualbar = forwardRef>(function Contextualbar(props, ref) { + return ; }); export default memo(Contextualbar); diff --git a/apps/meteor/client/components/Contextualbar/ContextualbarAction.tsx b/apps/meteor/client/components/Contextualbar/ContextualbarAction.tsx index 567bd4e276e1..8b35af3dfff7 100644 --- a/apps/meteor/client/components/Contextualbar/ContextualbarAction.tsx +++ b/apps/meteor/client/components/Contextualbar/ContextualbarAction.tsx @@ -1,17 +1,7 @@ -import { ContextualbarAction as ContextualbarActionComponent, ContextualbarV2Action } from '@rocket.chat/fuselage'; -import { FeaturePreview, FeaturePreviewOff, FeaturePreviewOn } from '@rocket.chat/ui-client'; +import { ContextualbarV2Action } from '@rocket.chat/fuselage'; import type { ComponentProps } from 'react'; import React, { memo } from 'react'; -const ContextualbarAction = (props: ComponentProps) => ( - - - - - - - - -); +const ContextualbarAction = (props: ComponentProps) => ; export default memo(ContextualbarAction); diff --git a/apps/meteor/client/components/Contextualbar/ContextualbarActions.tsx b/apps/meteor/client/components/Contextualbar/ContextualbarActions.tsx index 869030ddb479..591758a18d5b 100644 --- a/apps/meteor/client/components/Contextualbar/ContextualbarActions.tsx +++ b/apps/meteor/client/components/Contextualbar/ContextualbarActions.tsx @@ -1,17 +1,7 @@ -import { ContextualbarV2Actions, ContextualbarActions as ContextualbarActionsComponent } from '@rocket.chat/fuselage'; -import { FeaturePreview, FeaturePreviewOff, FeaturePreviewOn } from '@rocket.chat/ui-client'; +import { ContextualbarV2Actions } from '@rocket.chat/fuselage'; import type { ComponentProps } from 'react'; import React, { memo } from 'react'; -const ContextualbarActions = (props: ComponentProps) => ( - - - - - - - - -); +const ContextualbarActions = (props: ComponentProps) => ; export default memo(ContextualbarActions); diff --git a/apps/meteor/client/components/Contextualbar/ContextualbarButton.tsx b/apps/meteor/client/components/Contextualbar/ContextualbarButton.tsx index ab2ab878503e..ef318887c9c3 100644 --- a/apps/meteor/client/components/Contextualbar/ContextualbarButton.tsx +++ b/apps/meteor/client/components/Contextualbar/ContextualbarButton.tsx @@ -1,17 +1,7 @@ -import { ContextualbarV2Button, ContextualbarButton as ContextualbarButtonComponent } from '@rocket.chat/fuselage'; -import { FeaturePreview, FeaturePreviewOff, FeaturePreviewOn } from '@rocket.chat/ui-client'; +import { ContextualbarV2Button } from '@rocket.chat/fuselage'; import type { ComponentProps } from 'react'; import React, { memo } from 'react'; -const ContextualbarButton = (props: ComponentProps) => ( - - - - - - - - -); +const ContextualbarButton = (props: ComponentProps) => ; export default memo(ContextualbarButton); diff --git a/apps/meteor/client/components/Contextualbar/ContextualbarContent.tsx b/apps/meteor/client/components/Contextualbar/ContextualbarContent.tsx index 8986969d8a1d..6fed3033d1eb 100644 --- a/apps/meteor/client/components/Contextualbar/ContextualbarContent.tsx +++ b/apps/meteor/client/components/Contextualbar/ContextualbarContent.tsx @@ -1,20 +1,10 @@ -import { ContextualbarV2Content, ContextualbarContent as ContextualbarContentComponent } from '@rocket.chat/fuselage'; -import { FeaturePreview, FeaturePreviewOff, FeaturePreviewOn } from '@rocket.chat/ui-client'; +import { ContextualbarV2Content } from '@rocket.chat/fuselage'; import type { ComponentProps } from 'react'; import React, { forwardRef, memo } from 'react'; -const ContextualbarContent = forwardRef>( +const ContextualbarContent = forwardRef>( function ContextualbarContent(props, ref) { - return ( - - - - - - - - - ); + return ; }, ); diff --git a/apps/meteor/client/components/Contextualbar/ContextualbarEmptyContent.tsx b/apps/meteor/client/components/Contextualbar/ContextualbarEmptyContent.tsx index be3b3aca7c53..65c207b2191c 100644 --- a/apps/meteor/client/components/Contextualbar/ContextualbarEmptyContent.tsx +++ b/apps/meteor/client/components/Contextualbar/ContextualbarEmptyContent.tsx @@ -1,20 +1,10 @@ -import { ContextualbarV2EmptyContent, ContextualbarEmptyContent as ContextualbarEmptyContentComponent } from '@rocket.chat/fuselage'; -import { FeaturePreview, FeaturePreviewOff, FeaturePreviewOn } from '@rocket.chat/ui-client'; +import { ContextualbarV2EmptyContent } from '@rocket.chat/fuselage'; import type { ComponentProps } from 'react'; import React, { forwardRef, memo } from 'react'; -const ContextualbarEmptyContent = forwardRef>( +const ContextualbarEmptyContent = forwardRef>( function ContextualbarEmptyContent(props, ref) { - return ( - - - - - - - - - ); + return ; }, ); diff --git a/apps/meteor/client/components/Contextualbar/ContextualbarFooter.tsx b/apps/meteor/client/components/Contextualbar/ContextualbarFooter.tsx index c0e0d5304567..8addb5c349b3 100644 --- a/apps/meteor/client/components/Contextualbar/ContextualbarFooter.tsx +++ b/apps/meteor/client/components/Contextualbar/ContextualbarFooter.tsx @@ -1,21 +1,9 @@ -import { ContextualbarV2Footer, ContextualbarFooter as ContextualbarFooterComponent } from '@rocket.chat/fuselage'; -import { FeaturePreview, FeaturePreviewOff, FeaturePreviewOn } from '@rocket.chat/ui-client'; +import { ContextualbarV2Footer } from '@rocket.chat/fuselage'; import type { ComponentProps } from 'react'; import React, { forwardRef, memo } from 'react'; -const ContextualbarFooter = forwardRef>( - function ContextualbarFooter(props, ref) { - return ( - - - - - - - - - ); - }, -); +const ContextualbarFooter = forwardRef>(function ContextualbarFooter(props, ref) { + return ; +}); export default memo(ContextualbarFooter); diff --git a/apps/meteor/client/components/Contextualbar/ContextualbarHeader.tsx b/apps/meteor/client/components/Contextualbar/ContextualbarHeader.tsx index ebd92f0095e3..5d4094b2c9e3 100644 --- a/apps/meteor/client/components/Contextualbar/ContextualbarHeader.tsx +++ b/apps/meteor/client/components/Contextualbar/ContextualbarHeader.tsx @@ -1,22 +1,11 @@ -import { ContextualbarV2Header, ContextualbarHeader as ContextualbarHeaderComponent } from '@rocket.chat/fuselage'; -import { FeaturePreview, FeaturePreviewOff, FeaturePreviewOn } from '@rocket.chat/ui-client'; +import { ContextualbarV2Header } from '@rocket.chat/fuselage'; import type { ComponentPropsWithoutRef, ReactNode } from 'react'; import React, { memo } from 'react'; type ContextualbarHeaderProps = { - expanded?: boolean; children: ReactNode; -} & ComponentPropsWithoutRef; +} & ComponentPropsWithoutRef; -const ContextualbarHeader = ({ expanded, ...props }: ContextualbarHeaderProps) => ( - - - - - - - - -); +const ContextualbarHeader = (props: ContextualbarHeaderProps) => ; export default memo(ContextualbarHeader); diff --git a/apps/meteor/client/components/Contextualbar/ContextualbarIcon.tsx b/apps/meteor/client/components/Contextualbar/ContextualbarIcon.tsx index 5f6062fe351a..471bb47aa97c 100644 --- a/apps/meteor/client/components/Contextualbar/ContextualbarIcon.tsx +++ b/apps/meteor/client/components/Contextualbar/ContextualbarIcon.tsx @@ -1,17 +1,7 @@ -import { ContextualbarV2Icon, ContextualbarIcon as ContextualbarIconComponent } from '@rocket.chat/fuselage'; -import { FeaturePreview, FeaturePreviewOff, FeaturePreviewOn } from '@rocket.chat/ui-client'; +import { ContextualbarV2Icon } from '@rocket.chat/fuselage'; import type { ComponentProps } from 'react'; import React, { memo } from 'react'; -const ContextualbarIcon = (props: ComponentProps) => ( - - - - - - - - -); +const ContextualbarIcon = (props: ComponentProps) => ; export default memo(ContextualbarIcon); diff --git a/apps/meteor/client/components/Contextualbar/ContextualbarSection.tsx b/apps/meteor/client/components/Contextualbar/ContextualbarSection.tsx index d6ab9ac12e27..76441f50866c 100644 --- a/apps/meteor/client/components/Contextualbar/ContextualbarSection.tsx +++ b/apps/meteor/client/components/Contextualbar/ContextualbarSection.tsx @@ -1,20 +1,10 @@ -import { ContextualbarV2Section, ContextualbarSection as ContextualbarSectionComponent } from '@rocket.chat/fuselage'; -import { FeaturePreview, FeaturePreviewOff, FeaturePreviewOn } from '@rocket.chat/ui-client'; +import { ContextualbarV2Section } from '@rocket.chat/fuselage'; import type { ComponentProps } from 'react'; import React, { forwardRef, memo } from 'react'; -const ContextualbarSection = forwardRef>( +const ContextualbarSection = forwardRef>( function ContextualbarSection(props, ref) { - return ( - - - - - - - - - ); + return ; }, ); diff --git a/apps/meteor/client/components/Contextualbar/ContextualbarSkeleton.tsx b/apps/meteor/client/components/Contextualbar/ContextualbarSkeleton.tsx index 92b74451b450..1c5419a01597 100644 --- a/apps/meteor/client/components/Contextualbar/ContextualbarSkeleton.tsx +++ b/apps/meteor/client/components/Contextualbar/ContextualbarSkeleton.tsx @@ -1,17 +1,7 @@ -import { ContextualbarV2Skeleton, ContextualbarSkeleton as ContextualbarSkeletonComponent } from '@rocket.chat/fuselage'; -import { FeaturePreview, FeaturePreviewOff, FeaturePreviewOn } from '@rocket.chat/ui-client'; +import { ContextualbarV2Skeleton } from '@rocket.chat/fuselage'; import type { ComponentProps } from 'react'; import React, { memo } from 'react'; -const ContextualbarSkeleton = (props: ComponentProps) => ( - - - - - - - - -); +const ContextualbarSkeleton = (props: ComponentProps) => ; export default memo(ContextualbarSkeleton); diff --git a/apps/meteor/client/components/Contextualbar/ContextualbarTitle.tsx b/apps/meteor/client/components/Contextualbar/ContextualbarTitle.tsx index bffcc5669ce4..4ae70f0ab34f 100644 --- a/apps/meteor/client/components/Contextualbar/ContextualbarTitle.tsx +++ b/apps/meteor/client/components/Contextualbar/ContextualbarTitle.tsx @@ -1,17 +1,9 @@ -import { ContextualbarV2Title, ContextualbarTitle as ContextualbarTitleComponent } from '@rocket.chat/fuselage'; -import { FeaturePreview, FeaturePreviewOff, FeaturePreviewOn } from '@rocket.chat/ui-client'; +import { ContextualbarV2Title } from '@rocket.chat/fuselage'; import type { ComponentProps } from 'react'; import React from 'react'; -const ContextualbarTitle = (props: ComponentProps) => ( - - - - - - - - +const ContextualbarTitle = (props: ComponentProps) => ( + ); export default ContextualbarTitle; From 284ea6ddddef85694e7af680936810c2a1cda47a Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Thu, 5 Dec 2024 18:22:35 -0300 Subject: [PATCH 19/24] feat: use only `HeaderV2` in `client/components/Header` --- .../client/components/Header/Header.tsx | 13 ++---------- .../client/components/Header/HeaderAvatar.tsx | 19 ++--------------- .../components/Header/HeaderContent.tsx | 19 ++--------------- .../components/Header/HeaderContentRow.tsx | 19 ++--------------- .../components/Header/HeaderDivider.tsx | 19 ++--------------- .../client/components/Header/HeaderIcon.tsx | 19 ++--------------- .../client/components/Header/HeaderState.tsx | 19 ++--------------- .../components/Header/HeaderSubtitle.tsx | 19 ++--------------- .../client/components/Header/HeaderTag.tsx | 13 ++---------- .../components/Header/HeaderTagIcon.tsx | 19 ++--------------- .../components/Header/HeaderTagSkeleton.tsx | 19 ++--------------- .../client/components/Header/HeaderTitle.tsx | 19 ++--------------- .../components/Header/HeaderTitleButton.tsx | 19 ++--------------- .../components/Header/HeaderToolbar.tsx | 19 ++--------------- .../components/Header/HeaderToolbarAction.tsx | 21 +++---------------- .../Header/HeaderToolbarActionBadge.tsx | 19 ++--------------- .../Header/HeaderToolbarDivider.tsx | 19 ++--------------- 17 files changed, 35 insertions(+), 278 deletions(-) diff --git a/apps/meteor/client/components/Header/Header.tsx b/apps/meteor/client/components/Header/Header.tsx index 53c7f085889c..fb04c83c11a9 100644 --- a/apps/meteor/client/components/Header/Header.tsx +++ b/apps/meteor/client/components/Header/Header.tsx @@ -1,16 +1,7 @@ -import { FeaturePreview, FeaturePreviewOff, FeaturePreviewOn, HeaderV2, Header as HeaderComponent } from '@rocket.chat/ui-client'; +import { HeaderV2 } from '@rocket.chat/ui-client'; import type { ComponentProps } from 'react'; import React, { memo } from 'react'; -const Header = (props: ComponentProps) => ( - - - - - - - - -); +const Header = (props: ComponentProps) => ; export default memo(Header); diff --git a/apps/meteor/client/components/Header/HeaderAvatar.tsx b/apps/meteor/client/components/Header/HeaderAvatar.tsx index 0c1c3665f823..051ef02ab217 100644 --- a/apps/meteor/client/components/Header/HeaderAvatar.tsx +++ b/apps/meteor/client/components/Header/HeaderAvatar.tsx @@ -1,22 +1,7 @@ -import { - FeaturePreview, - FeaturePreviewOff, - FeaturePreviewOn, - HeaderV2Avatar, - HeaderAvatar as HeaderAvatarComponent, -} from '@rocket.chat/ui-client'; +import { HeaderV2Avatar } from '@rocket.chat/ui-client'; import type { ComponentProps } from 'react'; import React, { memo } from 'react'; -const HeaderAvatar = (props: ComponentProps) => ( - - - - - - - - -); +const HeaderAvatar = (props: ComponentProps) => ; export default memo(HeaderAvatar); diff --git a/apps/meteor/client/components/Header/HeaderContent.tsx b/apps/meteor/client/components/Header/HeaderContent.tsx index 622c85bf6bae..4413502dbc4c 100644 --- a/apps/meteor/client/components/Header/HeaderContent.tsx +++ b/apps/meteor/client/components/Header/HeaderContent.tsx @@ -1,22 +1,7 @@ -import { - FeaturePreview, - FeaturePreviewOff, - FeaturePreviewOn, - HeaderV2Content, - HeaderContent as HeaderContentComponent, -} from '@rocket.chat/ui-client'; +import { HeaderV2Content } from '@rocket.chat/ui-client'; import type { ComponentProps } from 'react'; import React, { memo } from 'react'; -const HeaderContent = (props: ComponentProps) => ( - - - - - - - - -); +const HeaderContent = (props: ComponentProps) => ; export default memo(HeaderContent); diff --git a/apps/meteor/client/components/Header/HeaderContentRow.tsx b/apps/meteor/client/components/Header/HeaderContentRow.tsx index 4ab684ce23a0..b21f0069ac09 100644 --- a/apps/meteor/client/components/Header/HeaderContentRow.tsx +++ b/apps/meteor/client/components/Header/HeaderContentRow.tsx @@ -1,22 +1,7 @@ -import { - FeaturePreview, - FeaturePreviewOff, - FeaturePreviewOn, - HeaderV2ContentRow, - HeaderContentRow as HeaderContentRowComponent, -} from '@rocket.chat/ui-client'; +import { HeaderV2ContentRow } from '@rocket.chat/ui-client'; import type { ComponentProps } from 'react'; import React, { memo } from 'react'; -const HeaderContentRow = (props: ComponentProps) => ( - - - - - - - - -); +const HeaderContentRow = (props: ComponentProps) => ; export default memo(HeaderContentRow); diff --git a/apps/meteor/client/components/Header/HeaderDivider.tsx b/apps/meteor/client/components/Header/HeaderDivider.tsx index 22861846852f..d85bc61e5c4a 100644 --- a/apps/meteor/client/components/Header/HeaderDivider.tsx +++ b/apps/meteor/client/components/Header/HeaderDivider.tsx @@ -1,21 +1,6 @@ -import { - FeaturePreview, - FeaturePreviewOff, - FeaturePreviewOn, - HeaderV2Divider, - HeaderDivider as HeaderDividerComponent, -} from '@rocket.chat/ui-client'; +import { HeaderV2Divider } from '@rocket.chat/ui-client'; import React, { memo } from 'react'; -const HeaderDivider = () => ( - - - - - - - - -); +const HeaderDivider = () => ; export default memo(HeaderDivider); diff --git a/apps/meteor/client/components/Header/HeaderIcon.tsx b/apps/meteor/client/components/Header/HeaderIcon.tsx index abcdba673fb0..6398e68be307 100644 --- a/apps/meteor/client/components/Header/HeaderIcon.tsx +++ b/apps/meteor/client/components/Header/HeaderIcon.tsx @@ -1,22 +1,7 @@ -import { - FeaturePreview, - FeaturePreviewOff, - FeaturePreviewOn, - HeaderV2Icon, - HeaderIcon as HeaderIconComponent, -} from '@rocket.chat/ui-client'; +import { HeaderV2Icon } from '@rocket.chat/ui-client'; import type { ComponentProps } from 'react'; import React, { memo } from 'react'; -const HeaderIcon = (props: ComponentProps) => ( - - - - - - - - -); +const HeaderIcon = (props: ComponentProps) => ; export default memo(HeaderIcon); diff --git a/apps/meteor/client/components/Header/HeaderState.tsx b/apps/meteor/client/components/Header/HeaderState.tsx index fee88b64b4e7..125c0935ea73 100644 --- a/apps/meteor/client/components/Header/HeaderState.tsx +++ b/apps/meteor/client/components/Header/HeaderState.tsx @@ -1,22 +1,7 @@ -import { - FeaturePreview, - FeaturePreviewOff, - FeaturePreviewOn, - HeaderV2State, - HeaderState as HeaderStateComponent, -} from '@rocket.chat/ui-client'; +import { HeaderV2State } from '@rocket.chat/ui-client'; import type { ComponentProps } from 'react'; import React, { memo } from 'react'; -const HeaderState = (props: ComponentProps) => ( - - - - - - - - -); +const HeaderState = (props: ComponentProps) => ; export default memo(HeaderState); diff --git a/apps/meteor/client/components/Header/HeaderSubtitle.tsx b/apps/meteor/client/components/Header/HeaderSubtitle.tsx index f23db95f3ee1..240643f0b0d0 100644 --- a/apps/meteor/client/components/Header/HeaderSubtitle.tsx +++ b/apps/meteor/client/components/Header/HeaderSubtitle.tsx @@ -1,22 +1,7 @@ -import { - FeaturePreview, - FeaturePreviewOff, - FeaturePreviewOn, - HeaderV2Subtitle, - HeaderSubtitle as HeaderSubtitleComponent, -} from '@rocket.chat/ui-client'; +import { HeaderV2Subtitle } from '@rocket.chat/ui-client'; import type { ComponentProps } from 'react'; import React, { memo } from 'react'; -const HeaderSubtitle = (props: ComponentProps) => ( - - - - - - - - -); +const HeaderSubtitle = (props: ComponentProps) => ; export default memo(HeaderSubtitle); diff --git a/apps/meteor/client/components/Header/HeaderTag.tsx b/apps/meteor/client/components/Header/HeaderTag.tsx index ae3332f2246a..ab2efe689e2b 100644 --- a/apps/meteor/client/components/Header/HeaderTag.tsx +++ b/apps/meteor/client/components/Header/HeaderTag.tsx @@ -1,16 +1,7 @@ -import { FeaturePreview, FeaturePreviewOff, FeaturePreviewOn, HeaderV2Tag, HeaderTag as HeaderTagComponent } from '@rocket.chat/ui-client'; +import { HeaderV2Tag } from '@rocket.chat/ui-client'; import type { ComponentProps } from 'react'; import React, { memo } from 'react'; -const HeaderTag = (props: ComponentProps) => ( - - - - - - - - -); +const HeaderTag = (props: ComponentProps) => ; export default memo(HeaderTag); diff --git a/apps/meteor/client/components/Header/HeaderTagIcon.tsx b/apps/meteor/client/components/Header/HeaderTagIcon.tsx index c0fe4d086eca..ef7cc4b26867 100644 --- a/apps/meteor/client/components/Header/HeaderTagIcon.tsx +++ b/apps/meteor/client/components/Header/HeaderTagIcon.tsx @@ -1,22 +1,7 @@ -import { - FeaturePreview, - FeaturePreviewOff, - FeaturePreviewOn, - HeaderV2TagIcon, - HeaderTagIcon as HeaderTagIconComponent, -} from '@rocket.chat/ui-client'; +import { HeaderV2TagIcon } from '@rocket.chat/ui-client'; import type { ComponentProps } from 'react'; import React, { memo } from 'react'; -const HeaderTagIcon = (props: ComponentProps) => ( - - - - - - - - -); +const HeaderTagIcon = (props: ComponentProps) => ; export default memo(HeaderTagIcon); diff --git a/apps/meteor/client/components/Header/HeaderTagSkeleton.tsx b/apps/meteor/client/components/Header/HeaderTagSkeleton.tsx index 40d4dfbf59e8..146f7a2c4d3f 100644 --- a/apps/meteor/client/components/Header/HeaderTagSkeleton.tsx +++ b/apps/meteor/client/components/Header/HeaderTagSkeleton.tsx @@ -1,21 +1,6 @@ -import { - FeaturePreview, - FeaturePreviewOff, - FeaturePreviewOn, - HeaderV2TagSkeleton, - HeaderTagSkeleton as HeaderTagSkeletonComponent, -} from '@rocket.chat/ui-client'; +import { HeaderV2TagSkeleton } from '@rocket.chat/ui-client'; import React, { memo } from 'react'; -const HeaderTagSkeleton = () => ( - - - - - - - - -); +const HeaderTagSkeleton = () => ; export default memo(HeaderTagSkeleton); diff --git a/apps/meteor/client/components/Header/HeaderTitle.tsx b/apps/meteor/client/components/Header/HeaderTitle.tsx index f5f2944781b5..3883213039d7 100644 --- a/apps/meteor/client/components/Header/HeaderTitle.tsx +++ b/apps/meteor/client/components/Header/HeaderTitle.tsx @@ -1,22 +1,7 @@ -import { - FeaturePreview, - FeaturePreviewOff, - FeaturePreviewOn, - HeaderV2Title, - HeaderTitle as HeaderTitleComponent, -} from '@rocket.chat/ui-client'; +import { HeaderV2Title } from '@rocket.chat/ui-client'; import type { ComponentProps } from 'react'; import React, { memo } from 'react'; -const HeaderTitle = (props: ComponentProps) => ( - - - - - - - - -); +const HeaderTitle = (props: ComponentProps) => ; export default memo(HeaderTitle); diff --git a/apps/meteor/client/components/Header/HeaderTitleButton.tsx b/apps/meteor/client/components/Header/HeaderTitleButton.tsx index 099bfb13fdd3..a88635e191fc 100644 --- a/apps/meteor/client/components/Header/HeaderTitleButton.tsx +++ b/apps/meteor/client/components/Header/HeaderTitleButton.tsx @@ -1,22 +1,7 @@ -import { - FeaturePreview, - FeaturePreviewOff, - FeaturePreviewOn, - HeaderV2TitleButton, - HeaderTitleButton as HeaderTitleButtonComponent, -} from '@rocket.chat/ui-client'; +import { HeaderV2TitleButton } from '@rocket.chat/ui-client'; import type { ComponentProps } from 'react'; import React, { memo } from 'react'; -const HeaderTitleButton = (props: ComponentProps) => ( - - - - - - - - -); +const HeaderTitleButton = (props: ComponentProps) => ; export default memo(HeaderTitleButton); diff --git a/apps/meteor/client/components/Header/HeaderToolbar.tsx b/apps/meteor/client/components/Header/HeaderToolbar.tsx index f0eccfda0401..8ae9188f73f8 100644 --- a/apps/meteor/client/components/Header/HeaderToolbar.tsx +++ b/apps/meteor/client/components/Header/HeaderToolbar.tsx @@ -1,22 +1,7 @@ -import { - FeaturePreview, - FeaturePreviewOff, - FeaturePreviewOn, - HeaderV2Toolbar, - HeaderToolbar as HeaderToolbarComponent, -} from '@rocket.chat/ui-client'; +import { HeaderV2Toolbar } from '@rocket.chat/ui-client'; import type { ComponentProps } from 'react'; import React, { memo } from 'react'; -const HeaderToolbar = (props: ComponentProps) => ( - - - - - - - - -); +const HeaderToolbar = (props: ComponentProps) => ; export default memo(HeaderToolbar); diff --git a/apps/meteor/client/components/Header/HeaderToolbarAction.tsx b/apps/meteor/client/components/Header/HeaderToolbarAction.tsx index 720102b17574..50e73ef9f547 100644 --- a/apps/meteor/client/components/Header/HeaderToolbarAction.tsx +++ b/apps/meteor/client/components/Header/HeaderToolbarAction.tsx @@ -1,25 +1,10 @@ -import { - FeaturePreview, - FeaturePreviewOff, - FeaturePreviewOn, - HeaderV2ToolbarAction, - HeaderToolbarAction as HeaderToolbarActionComponent, -} from '@rocket.chat/ui-client'; +import { HeaderV2ToolbarAction } from '@rocket.chat/ui-client'; import type { ComponentProps } from 'react'; import React, { forwardRef, memo } from 'react'; -const HeaderToolbarAction = forwardRef>( +const HeaderToolbarAction = forwardRef>( function HeaderToolbarAction(props, ref) { - return ( - - - - - - - - - ); + return ; }, ); diff --git a/apps/meteor/client/components/Header/HeaderToolbarActionBadge.tsx b/apps/meteor/client/components/Header/HeaderToolbarActionBadge.tsx index 67aae03729f9..2143e92ecad0 100644 --- a/apps/meteor/client/components/Header/HeaderToolbarActionBadge.tsx +++ b/apps/meteor/client/components/Header/HeaderToolbarActionBadge.tsx @@ -1,22 +1,7 @@ -import { - FeaturePreview, - FeaturePreviewOff, - FeaturePreviewOn, - HeaderV2ToolbarActionBadge, - HeaderToolbarActionBadge as HeaderToolbarActionBadgeComponent, -} from '@rocket.chat/ui-client'; +import { HeaderV2ToolbarActionBadge } from '@rocket.chat/ui-client'; import type { ComponentProps } from 'react'; import React, { memo } from 'react'; -const HeaderToolbarActionBadge = (props: ComponentProps) => ( - - - - - - - - -); +const HeaderToolbarActionBadge = (props: ComponentProps) => ; export default memo(HeaderToolbarActionBadge); diff --git a/apps/meteor/client/components/Header/HeaderToolbarDivider.tsx b/apps/meteor/client/components/Header/HeaderToolbarDivider.tsx index 5986671ec836..c7455f8132ab 100644 --- a/apps/meteor/client/components/Header/HeaderToolbarDivider.tsx +++ b/apps/meteor/client/components/Header/HeaderToolbarDivider.tsx @@ -1,21 +1,6 @@ -import { - FeaturePreview, - FeaturePreviewOff, - FeaturePreviewOn, - HeaderV2ToolbarDivider, - HeaderToolbarDivider as HeaderToolbarDividerComponent, -} from '@rocket.chat/ui-client'; +import { HeaderV2ToolbarDivider } from '@rocket.chat/ui-client'; import React, { memo } from 'react'; -const HeaderToolbarDivider = () => ( - - - - - - - - -); +const HeaderToolbarDivider = () => ; export default memo(HeaderToolbarDivider); From 89a50aba0de3fd7bdcf72407a5c93a0b27e1b16c Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Thu, 5 Dec 2024 18:24:27 -0300 Subject: [PATCH 20/24] fix: Navbar casing --- apps/meteor/client/navbar/Navbar.tsx | 4 ++-- apps/meteor/client/navbar/index.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/meteor/client/navbar/Navbar.tsx b/apps/meteor/client/navbar/Navbar.tsx index 116ff00b4075..a9a0c661d1a5 100644 --- a/apps/meteor/client/navbar/Navbar.tsx +++ b/apps/meteor/client/navbar/Navbar.tsx @@ -19,7 +19,7 @@ import { useOmnichannelEnabled } from '../hooks/omnichannel/useOmnichannelEnable import { useOmnichannelShowQueueLink } from '../hooks/omnichannel/useOmnichannelShowQueueLink'; import { useHasLicenseModule } from '../hooks/useHasLicenseModule'; -const NavBar = () => { +const Navbar = () => { const t = useTranslation(); const user = useUser(); @@ -84,4 +84,4 @@ const NavBar = () => { ); }; -export default NavBar; +export default Navbar; diff --git a/apps/meteor/client/navbar/index.ts b/apps/meteor/client/navbar/index.ts index 902ee590de66..86d1b79b3ea2 100644 --- a/apps/meteor/client/navbar/index.ts +++ b/apps/meteor/client/navbar/index.ts @@ -1 +1 @@ -export { default } from './NavBar'; +export { default } from './Navbar'; From c18b106ddad73e06be290e6901f436fa9f5c1490 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Thu, 5 Dec 2024 18:53:48 -0300 Subject: [PATCH 21/24] fix: typecheck --- .../directory/calls/contextualBar/VoipInfo.tsx | 2 +- apps/meteor/client/views/room/Header/icons/Favorite.tsx | 8 +------- .../client/views/room/contextualBar/Threads/Thread.tsx | 2 +- 3 files changed, 3 insertions(+), 9 deletions(-) diff --git a/apps/meteor/client/views/omnichannel/directory/calls/contextualBar/VoipInfo.tsx b/apps/meteor/client/views/omnichannel/directory/calls/contextualBar/VoipInfo.tsx index fa63816c4d97..86ed9e59e501 100644 --- a/apps/meteor/client/views/omnichannel/directory/calls/contextualBar/VoipInfo.tsx +++ b/apps/meteor/client/views/omnichannel/directory/calls/contextualBar/VoipInfo.tsx @@ -45,7 +45,7 @@ export const VoipInfo = ({ room, onClickClose /* , onClickReport */ }: VoipInfo return ( <> - + {t('Call_Information')} diff --git a/apps/meteor/client/views/room/Header/icons/Favorite.tsx b/apps/meteor/client/views/room/Header/icons/Favorite.tsx index bf58a748697b..0a8aa0875a18 100644 --- a/apps/meteor/client/views/room/Header/icons/Favorite.tsx +++ b/apps/meteor/client/views/room/Header/icons/Favorite.tsx @@ -29,13 +29,7 @@ const Favorite = ({ room: { _id, f: favorite = false, t: type, name } }: { room: } return ( - + ); }; diff --git a/apps/meteor/client/views/room/contextualBar/Threads/Thread.tsx b/apps/meteor/client/views/room/contextualBar/Threads/Thread.tsx index d69c3958050d..68489800505f 100644 --- a/apps/meteor/client/views/room/contextualBar/Threads/Thread.tsx +++ b/apps/meteor/client/views/room/contextualBar/Threads/Thread.tsx @@ -102,7 +102,7 @@ const Thread = ({ tmid }: ThreadProps) => { insetBlock={0} border='none' > - + {(mainMessageQueryResult.isLoading && ) || (mainMessageQueryResult.isSuccess && ) || From 3ec7e591a04ef694e4e02328661a82d0233dcc72 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Mon, 9 Dec 2024 17:11:37 -0300 Subject: [PATCH 22/24] test: adjust locators --- apps/meteor/client/sidebar/header/CreateChannelModal.tsx | 1 - apps/meteor/tests/e2e/channel-management.spec.ts | 2 +- apps/meteor/tests/e2e/page-objects/fragments/sidebar.ts | 3 +++ 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/apps/meteor/client/sidebar/header/CreateChannelModal.tsx b/apps/meteor/client/sidebar/header/CreateChannelModal.tsx index 964b808cb10f..385f206f3e69 100644 --- a/apps/meteor/client/sidebar/header/CreateChannelModal.tsx +++ b/apps/meteor/client/sidebar/header/CreateChannelModal.tsx @@ -319,7 +319,6 @@ const CreateChannelModal = ({ teamId = '', onClose, reload }: CreateChannelModal disabled={e2eDisabled || federated} onChange={onChange} aria-describedby={`${encryptedId}-hint`} - aria-labelledby='Encrypted_channel_Label' /> )} /> diff --git a/apps/meteor/tests/e2e/channel-management.spec.ts b/apps/meteor/tests/e2e/channel-management.spec.ts index a62168d55325..95d1136c89f0 100644 --- a/apps/meteor/tests/e2e/channel-management.spec.ts +++ b/apps/meteor/tests/e2e/channel-management.spec.ts @@ -134,7 +134,7 @@ test.describe.serial('channel-management', () => { targetChannel = hugeName; await page.setViewportSize({ width: 640, height: 460 }); - await expect(page.getByRole('heading', { name: hugeName })).toHaveCSS('width', '427px'); + await expect(page.getByRole('heading', { name: hugeName })).toHaveCSS('width', '417px'); }); test('should open sidebar clicking on sidebar toggler', async ({ page }) => { diff --git a/apps/meteor/tests/e2e/page-objects/fragments/sidebar.ts b/apps/meteor/tests/e2e/page-objects/fragments/sidebar.ts index 8162ef7885c6..db2a1a724eee 100644 --- a/apps/meteor/tests/e2e/page-objects/fragments/sidebar.ts +++ b/apps/meteor/tests/e2e/page-objects/fragments/sidebar.ts @@ -124,6 +124,9 @@ export class Sidebar { async createEncryptedChannel(name: string) { await this.openCreateNewByLabel('Channel'); await this.createRoomModal.inputChannelName.fill(name); + await this.createRoomModal.advancedSettingsAccordion.click(); + await this.createRoomModal.checkboxEncryption.click(); + await this.createRoomModal.btnCreate.click(); } async createPublicChannel(name: string) { From f61dae173bbe637f302db0ac9141b6171ce68198 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Wed, 11 Dec 2024 15:59:18 -0300 Subject: [PATCH 23/24] test: adjust `sidebar` and `e2e-encryption` tests --- apps/meteor/tests/e2e/e2e-encryption.spec.ts | 6 ++++-- .../meteor/tests/e2e/page-objects/fragments/home-content.ts | 5 +++++ apps/meteor/tests/e2e/sidebar.spec.ts | 2 +- 3 files changed, 10 insertions(+), 3 deletions(-) diff --git a/apps/meteor/tests/e2e/e2e-encryption.spec.ts b/apps/meteor/tests/e2e/e2e-encryption.spec.ts index 847b627a9431..05b4296969f5 100644 --- a/apps/meteor/tests/e2e/e2e-encryption.spec.ts +++ b/apps/meteor/tests/e2e/e2e-encryption.spec.ts @@ -754,7 +754,7 @@ test.describe.serial('e2e-encryption', () => { // Check last message in the sidebar const sidebarChannel = poHomeChannel.sidebar.getSidebarItemByName(channelName); await expect(sidebarChannel).toBeVisible(); - await expect(sidebarChannel.locator('span')).toContainText(encriptedMessage1); + await expect(sidebarChannel.filter({ hasText: encriptedMessage1 })).toBeVisible(); }); test('expect create a private encrypted channel and pin/star an encrypted message', async ({ page }) => { @@ -1007,7 +1007,9 @@ test.describe.serial('e2ee room setup', () => { await injectInitialData(); await restoreState(page, Users.admin); - await poHomeChannel.sidebar.openChat(channelName); + await poHomeChannel.sidebar.typeSearch(channelName); + await poHomeChannel.sidebar.getSearchRoomByName(channelName).click(); + await poHomeChannel.content.waitForPageLoad(); await page.locator('role=button[name="Save E2EE password"]').click(); await page.locator('#modal-root >> button:has-text("I saved my password")').click(); diff --git a/apps/meteor/tests/e2e/page-objects/fragments/home-content.ts b/apps/meteor/tests/e2e/page-objects/fragments/home-content.ts index a103ee895b14..eadf554c7faf 100644 --- a/apps/meteor/tests/e2e/page-objects/fragments/home-content.ts +++ b/apps/meteor/tests/e2e/page-objects/fragments/home-content.ts @@ -410,4 +410,9 @@ export class HomeContent { await expect(this.page.getByRole('main').getByRole('list', { name: 'Message list' })).not.toHaveAttribute('aria-busy', 'true'); } + + async waitForPageLoad(): Promise { + await this.page.waitForSelector('main'); + await this.page.waitForSelector('main >> role=heading'); + } } diff --git a/apps/meteor/tests/e2e/sidebar.spec.ts b/apps/meteor/tests/e2e/sidebar.spec.ts index 259f2f77c962..f8e5524773db 100644 --- a/apps/meteor/tests/e2e/sidebar.spec.ts +++ b/apps/meteor/tests/e2e/sidebar.spec.ts @@ -14,9 +14,9 @@ test.describe.serial('sidebar', () => { }); test('should navigate on sidebar toolbar using arrow keys', async ({ page }) => { + await poHomeDiscussion.content.waitForPageLoad(); await poHomeDiscussion.navbar.homeButton.focus(); await page.keyboard.press('ArrowRight'); - await expect(poHomeDiscussion.navbar.directoryButton).toBeFocused(); }); From 1ade865fd717b6574635666de6b36d713938f763 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Wed, 11 Dec 2024 16:37:18 -0300 Subject: [PATCH 24/24] test: `team-management` --- apps/meteor/tests/e2e/team-management.spec.ts | 51 +++++++++---------- 1 file changed, 25 insertions(+), 26 deletions(-) diff --git a/apps/meteor/tests/e2e/team-management.spec.ts b/apps/meteor/tests/e2e/team-management.spec.ts index 2a9abcf1cd97..8cb0f9cfa24c 100644 --- a/apps/meteor/tests/e2e/team-management.spec.ts +++ b/apps/meteor/tests/e2e/team-management.spec.ts @@ -2,7 +2,7 @@ import { faker } from '@faker-js/faker'; import { Users } from './fixtures/userStates'; import { HomeTeam } from './page-objects'; -import { createTargetChannel, deleteTeam, deleteChannel, createTargetTeam } from './utils'; +import { createTargetChannel, deleteTeam, deleteChannel } from './utils'; import { expect, test } from './utils/test'; test.use({ storageState: Users.admin.state }); @@ -10,7 +10,7 @@ test.use({ storageState: Users.admin.state }); test.describe.serial('teams-management', () => { let poHomeTeam: HomeTeam; let targetChannel: string; - let targetTeam: string; + const targetTeam = faker.string.uuid(); const targetTeamName = faker.string.uuid(); const targetTeamNonPrivate = faker.string.uuid(); const targetTeamReadOnly = faker.string.uuid(); @@ -19,7 +19,6 @@ test.describe.serial('teams-management', () => { test.beforeAll(async ({ api }) => { targetChannel = await createTargetChannel(api); - targetTeam = await createTargetTeam(api); }); test.afterAll(async ({ api }) => { @@ -50,11 +49,11 @@ test.describe.serial('teams-management', () => { test('should create targetTeam private', async ({ page }) => { await poHomeTeam.sidebar.openCreateNewByLabel('Team'); - await poHomeTeam.createRoomModal.inputTeamName.fill(targetTeamName); + await poHomeTeam.createRoomModal.inputTeamName.fill(targetTeam); await poHomeTeam.addMember('user1'); await poHomeTeam.createRoomModal.btnCreate.click(); - await expect(page).toHaveURL(`/group/${targetTeamName}`); + await expect(page).toHaveURL(`/group/${targetTeam}`); }); test('should create targetTeamNonPrivate non private', async ({ page }) => { @@ -80,7 +79,7 @@ test.describe.serial('teams-management', () => { test('should throw validation error if team name already exists', async () => { await poHomeTeam.sidebar.openCreateNewByLabel('Team'); - await poHomeTeam.createRoomModal.inputTeamName.fill(targetTeamName); + await poHomeTeam.createRoomModal.inputTeamName.fill(targetTeam); await poHomeTeam.createRoomModal.btnCreate.click(); await expect(poHomeTeam.inputTeamName).toHaveAttribute('aria-invalid', 'true'); @@ -137,7 +136,7 @@ test.describe.serial('teams-management', () => { await expect(poHomeTeam.tabs.channels.btnCreateNew).not.toBeVisible(); }); - test.skip('should allow creating a channel in a team if user has the create-team-channel permission, but not the create-team-group permission', async ({ + test('should allow creating a channel in a team if user has the create-team-channel permission, but not the create-team-group permission', async ({ api, }) => { expect( @@ -163,7 +162,7 @@ test.describe.serial('teams-management', () => { await expect(poHomeTeam.tabs.channels.channelsList).toContainText(targetChannelNameInTeam); }); - test.skip('should allow creating a group in a team if user has the create-team-group permission, but not the create-team-channel permission', async ({ + test('should allow creating a group in a team if user has the create-team-group permission, but not the create-team-channel permission', async ({ api, }) => { expect( @@ -222,7 +221,7 @@ test.describe.serial('teams-management', () => { await poHomeTeam.sidebar.openChat(targetTeam); await poHomeTeam.tabs.btnChannels.click(); - await poHomeTeam.tabs.channels.openChannelOptionMoreActions(targetChannel); + await poHomeTeam.tabs.channels.openChannelOptionMoreActions(targetGroupNameInTeam); await expect(page.getByRole('menu', { exact: true }).getByRole('menuitem', { name: 'Remove from team' })).not.toBeVisible(); }); @@ -231,7 +230,7 @@ test.describe.serial('teams-management', () => { await poHomeTeam.sidebar.openChat(targetTeam); await poHomeTeam.tabs.btnChannels.click(); - await poHomeTeam.tabs.channels.openChannelOptionMoreActions(targetChannel); + await poHomeTeam.tabs.channels.openChannelOptionMoreActions(targetGroupNameInTeam); await expect(page.getByRole('menu', { exact: true }).getByRole('menuitem', { name: 'Remove from team' })).toBeVisible(); await page.getByRole('menu', { exact: true }).getByRole('menuitem', { name: 'Remove from team' }).click(); await poHomeTeam.tabs.channels.confirmRemoveChannel(); @@ -258,13 +257,13 @@ test.describe.serial('teams-management', () => { await poHomeTeam.sidebar.openChat(targetTeam); await poHomeTeam.tabs.btnChannels.click(); await poHomeTeam.tabs.channels.btnAddExisting.click(); - await poHomeTeam.tabs.channels.inputChannels.fill(targetChannel); - await page.locator(`.rcx-option__content:has-text("${targetChannel}")`).click(); + await poHomeTeam.tabs.channels.inputChannels.fill(targetGroupNameInTeam); + await page.locator(`.rcx-option__content:has-text("${targetGroupNameInTeam}")`).click(); await poHomeTeam.tabs.channels.btnAdd.click(); - await expect(poHomeTeam.tabs.channels.channelsList).toContainText(targetChannel); + await expect(poHomeTeam.tabs.channels.channelsList).toContainText(targetGroupNameInTeam); // try to delete group in team - await poHomeTeam.tabs.channels.openChannelOptionMoreActions(targetChannel); + await poHomeTeam.tabs.channels.openChannelOptionMoreActions(targetGroupNameInTeam); await expect(page.getByRole('menu', { exact: true }).getByRole('menuitem', { name: 'Delete' })).not.toBeVisible(); }); @@ -274,16 +273,16 @@ test.describe.serial('teams-management', () => { }) => { expect((await api.post('/permissions.update', { permissions: [{ _id: 'delete-team-group', roles: ['owner'] }] })).status()).toBe(200); - await poHomeTeam.sidebar.openChat(targetTeam); + await poHomeTeam.sidebar.openChat(targetTeamName); await poHomeTeam.tabs.btnChannels.click(); - await poHomeTeam.tabs.channels.openChannelOptionMoreActions(targetChannel); + await poHomeTeam.tabs.channels.openChannelOptionMoreActions(targetGroupNameInTeam); await expect(page.getByRole('menu', { exact: true }).getByRole('menuitem', { name: 'Delete' })).toBeVisible(); await page.getByRole('menu', { exact: true }).getByRole('menuitem', { name: 'Delete' }).click(); await poHomeTeam.tabs.channels.confirmDeleteRoom(); await poHomeTeam.sidebar.openChat(targetTeam); await poHomeTeam.tabs.btnChannels.click(); - await expect(poHomeTeam.tabs.channels.channelsList).not.toContainText(targetChannel); + await expect(poHomeTeam.tabs.channels.channelsList).not.toContainText(targetGroupNameInTeam); }); test('should not allow removing a targetChannel from targetTeam if user does not have the remove-team-channel permission', async ({ @@ -296,7 +295,7 @@ test.describe.serial('teams-management', () => { await poHomeTeam.sidebar.openChat(targetTeam); await poHomeTeam.tabs.btnChannels.click(); - await poHomeTeam.tabs.channels.openChannelOptionMoreActions(targetChannel); + await poHomeTeam.tabs.channels.openChannelOptionMoreActions(targetChannelNameInTeam); await expect(page.getByRole('menu', { exact: true }).getByRole('menuitem', { name: 'Remove from team' })).not.toBeVisible(); }); @@ -305,12 +304,12 @@ test.describe.serial('teams-management', () => { await poHomeTeam.sidebar.openChat(targetTeam); await poHomeTeam.tabs.btnChannels.click(); - await poHomeTeam.tabs.channels.openChannelOptionMoreActions(targetChannel); + await poHomeTeam.tabs.channels.openChannelOptionMoreActions(targetChannelNameInTeam); await expect(page.getByRole('menu', { exact: true }).getByRole('menuitem', { name: 'Remove from team' })).toBeVisible(); await page.getByRole('menu', { exact: true }).getByRole('menuitem', { name: 'Remove from team' }).click(); await poHomeTeam.tabs.channels.confirmRemoveChannel(); - await expect(poHomeTeam.tabs.channels.channelsList).not.toContainText(targetChannel); + await expect(poHomeTeam.tabs.channels.channelsList).not.toContainText(targetChannelNameInTeam); }); test('should not allow deleting a targetChannel from targetTeam if the channel owner does not have the delete-team-channel permission', async ({ @@ -332,13 +331,13 @@ test.describe.serial('teams-management', () => { await poHomeTeam.sidebar.openChat(targetTeam); await poHomeTeam.tabs.btnChannels.click(); await poHomeTeam.tabs.channels.btnAddExisting.click(); - await poHomeTeam.tabs.channels.inputChannels.fill(targetChannel); - await page.locator(`.rcx-option__content:has-text("${targetChannel}")`).click(); + await poHomeTeam.tabs.channels.inputChannels.fill(targetChannelNameInTeam); + await page.locator(`.rcx-option__content:has-text("${targetChannelNameInTeam}")`).click(); await poHomeTeam.tabs.channels.btnAdd.click(); - await expect(poHomeTeam.tabs.channels.channelsList).toContainText(targetChannel); + await expect(poHomeTeam.tabs.channels.channelsList).toContainText(targetChannelNameInTeam); // try to delete channel in team - await poHomeTeam.tabs.channels.openChannelOptionMoreActions(targetChannel); + await poHomeTeam.tabs.channels.openChannelOptionMoreActions(targetChannelNameInTeam); await expect(page.getByRole('menu', { exact: true }).getByRole('menuitem', { name: 'Delete' })).not.toBeVisible(); }); @@ -350,14 +349,14 @@ test.describe.serial('teams-management', () => { await poHomeTeam.sidebar.openChat(targetTeam); await poHomeTeam.tabs.btnChannels.click(); - await poHomeTeam.tabs.channels.openChannelOptionMoreActions(targetChannel); + await poHomeTeam.tabs.channels.openChannelOptionMoreActions(targetChannelNameInTeam); await expect(page.getByRole('menu', { exact: true }).getByRole('menuitem', { name: 'Delete' })).toBeVisible(); await page.getByRole('menu', { exact: true }).getByRole('menuitem', { name: 'Delete' }).click(); await poHomeTeam.tabs.channels.confirmDeleteRoom(); await poHomeTeam.sidebar.openChat(targetTeam); await poHomeTeam.tabs.btnChannels.click(); - await expect(poHomeTeam.tabs.channels.channelsList).not.toContainText(targetChannel); + await expect(poHomeTeam.tabs.channels.channelsList).not.toContainText(targetChannelNameInTeam); }); test('should remove targetChannel from targetTeam', async ({ page, api }) => {