diff --git a/apps/meteor/client/NavBarV2/NavBar.tsx b/apps/meteor/client/NavBarV2/NavBar.tsx index 26a281452c54e..8827cdb36fc46 100644 --- a/apps/meteor/client/NavBarV2/NavBar.tsx +++ b/apps/meteor/client/NavBarV2/NavBar.tsx @@ -11,20 +11,23 @@ import { NavBarItemOmnichannelQueue, NavBarItemOmnichannelCallToggle, } from './NavBarOmnichannelToolbar'; -import { NavBarItemMarketPlaceMenu, NavBarItemAuditMenu, NavBarItemDirectoryPage, NavBarItemHomePage } from './NavBarPagesToolbar'; +import { + NavBarItemMarketPlaceMenu, + NavBarItemDirectoryPage, + NavBarItemHomePage, + NavBarItemCreateNew, + NavBarItemSort, +} from './NavBarPagesToolbar'; import { NavBarItemLoginPage, NavBarItemAdministrationMenu, UserMenu } from './NavBarSettingsToolbar'; -import { NavBarItemVoipDialer } from './NavBarVoipToolbar'; +import { NavBarItemVoipDialer, NavBarItemVoipToggler } 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'); @@ -51,11 +54,22 @@ const NavBar = () => { {showMarketplace && } - {hasAuditLicense && } + + - {showOmnichannel && ( + + + {showVoip && ( <> + + + + + + )} + {showOmnichannel && ( + <> {showOmnichannelQueueLink && } {isCallReady && } @@ -63,18 +77,9 @@ const NavBar = () => { {isCallEnabled && } - - )} - {showVoip && ( - <> - - - )} - - {user ? : } diff --git a/apps/meteor/client/NavBarV2/NavBarPagesToolbar/NavBarItemAuditMenu.tsx b/apps/meteor/client/NavBarV2/NavBarPagesToolbar/NavBarItemAuditMenu.tsx deleted file mode 100644 index 2da6f7529be03..0000000000000 --- a/apps/meteor/client/NavBarV2/NavBarPagesToolbar/NavBarItemAuditMenu.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { NavBarItem } from '@rocket.chat/fuselage'; -import { GenericMenu } from '@rocket.chat/ui-client'; -import { useCurrentRoutePath } from '@rocket.chat/ui-contexts'; -import type { HTMLAttributes } from 'react'; -import { useTranslation } from 'react-i18next'; - -import { useAuditMenu } from './hooks/useAuditMenu'; - -type NavBarItemAuditMenuProps = Omit, 'is'>; - -const NavBarItemAuditMenu = (props: NavBarItemAuditMenuProps) => { - const { t } = useTranslation(); - const sections = useAuditMenu(); - const currentRoute = useCurrentRoutePath(); - - return ( - - ); -}; - -export default NavBarItemAuditMenu; diff --git a/apps/meteor/client/sidebarv2/header/actions/CreateRoom.tsx b/apps/meteor/client/NavBarV2/NavBarPagesToolbar/NavBarItemCreateNew.tsx similarity index 50% rename from apps/meteor/client/sidebarv2/header/actions/CreateRoom.tsx rename to apps/meteor/client/NavBarV2/NavBarPagesToolbar/NavBarItemCreateNew.tsx index c720b8a768f40..f2b3c2956e97d 100644 --- a/apps/meteor/client/sidebarv2/header/actions/CreateRoom.tsx +++ b/apps/meteor/client/NavBarV2/NavBarPagesToolbar/NavBarItemCreateNew.tsx @@ -3,16 +3,16 @@ import { GenericMenu } from '@rocket.chat/ui-client'; import type { HTMLAttributes } from 'react'; import { useTranslation } from 'react-i18next'; -import { useCreateRoom } from './hooks/useCreateRoomMenu'; +import { useCreateNewMenu } from './hooks/useCreateNewMenu'; type CreateRoomProps = Omit, 'is'>; -const CreateRoom = (props: CreateRoomProps) => { +const NavBarItemCreateNew = (props: CreateRoomProps) => { const { t } = useTranslation(); - const sections = useCreateRoom(); + const sections = useCreateNewMenu(); - return ; + return ; }; -export default CreateRoom; +export default NavBarItemCreateNew; diff --git a/apps/meteor/client/sidebarv2/header/actions/Sort.tsx b/apps/meteor/client/NavBarV2/NavBarPagesToolbar/NavBarItemSort.tsx similarity index 74% rename from apps/meteor/client/sidebarv2/header/actions/Sort.tsx rename to apps/meteor/client/NavBarV2/NavBarPagesToolbar/NavBarItemSort.tsx index 5f0a19b2c66da..430718e036820 100644 --- a/apps/meteor/client/sidebarv2/header/actions/Sort.tsx +++ b/apps/meteor/client/NavBarV2/NavBarPagesToolbar/NavBarItemSort.tsx @@ -5,9 +5,9 @@ import { useTranslation } from 'react-i18next'; import { useSortMenu } from './hooks/useSortMenu'; -type SortProps = Omit, 'is'>; +type NavBarItemSortProps = Omit, 'is'>; -const Sort = (props: SortProps) => { +const NavBarItemSort = (props: NavBarItemSortProps) => { const { t } = useTranslation(); const sections = useSortMenu(); @@ -15,4 +15,4 @@ const Sort = (props: SortProps) => { return ; }; -export default Sort; +export default NavBarItemSort; diff --git a/apps/meteor/client/sidebarv2/header/CreateChannelModal.tsx b/apps/meteor/client/NavBarV2/NavBarPagesToolbar/actions/CreateChannelModal.tsx similarity index 97% rename from apps/meteor/client/sidebarv2/header/CreateChannelModal.tsx rename to apps/meteor/client/NavBarV2/NavBarPagesToolbar/actions/CreateChannelModal.tsx index b279993cd9229..b5cdfe223002a 100644 --- a/apps/meteor/client/sidebarv2/header/CreateChannelModal.tsx +++ b/apps/meteor/client/NavBarV2/NavBarPagesToolbar/actions/CreateChannelModal.tsx @@ -28,10 +28,10 @@ import type { ComponentProps, ReactElement } from 'react'; import { useId, useEffect, useMemo } from 'react'; import { useForm, Controller } from 'react-hook-form'; -import { useEncryptedRoomDescription } from './hooks/useEncryptedRoomDescription'; -import UserAutoCompleteMultipleFederated from '../../components/UserAutoCompleteMultiple/UserAutoCompleteMultipleFederated'; -import { useHasLicenseModule } from '../../hooks/useHasLicenseModule'; -import { goToRoomById } from '../../lib/utils/goToRoomById'; +import { useEncryptedRoomDescription } from './useEncryptedRoomDescription'; +import UserAutoCompleteMultipleFederated from '../../../components/UserAutoCompleteMultiple/UserAutoCompleteMultipleFederated'; +import { useHasLicenseModule } from '../../../hooks/useHasLicenseModule'; +import { goToRoomById } from '../../../lib/utils/goToRoomById'; type CreateChannelModalProps = { teamId?: string; diff --git a/apps/meteor/client/sidebarv2/header/CreateDirectMessage.tsx b/apps/meteor/client/NavBarV2/NavBarPagesToolbar/actions/CreateDirectMessage.tsx similarity index 94% rename from apps/meteor/client/sidebarv2/header/CreateDirectMessage.tsx rename to apps/meteor/client/NavBarV2/NavBarPagesToolbar/actions/CreateDirectMessage.tsx index cdb02d364b05c..1a7a5a5f5b7ff 100644 --- a/apps/meteor/client/sidebarv2/header/CreateDirectMessage.tsx +++ b/apps/meteor/client/NavBarV2/NavBarPagesToolbar/actions/CreateDirectMessage.tsx @@ -5,8 +5,8 @@ import { useMutation } from '@tanstack/react-query'; import { useId, memo } from 'react'; import { useForm, Controller } from 'react-hook-form'; -import UserAutoCompleteMultipleFederated from '../../components/UserAutoCompleteMultiple/UserAutoCompleteMultipleFederated'; -import { goToRoomById } from '../../lib/utils/goToRoomById'; +import UserAutoCompleteMultipleFederated from '../../../components/UserAutoCompleteMultiple/UserAutoCompleteMultipleFederated'; +import { goToRoomById } from '../../../lib/utils/goToRoomById'; type CreateDirectMessageProps = { onClose: () => void }; diff --git a/apps/meteor/client/sidebarv2/header/CreateTeamModal.tsx b/apps/meteor/client/NavBarV2/NavBarPagesToolbar/actions/CreateTeamModal.tsx similarity index 98% rename from apps/meteor/client/sidebarv2/header/CreateTeamModal.tsx rename to apps/meteor/client/NavBarV2/NavBarPagesToolbar/actions/CreateTeamModal.tsx index 84ad009c96f91..29585f2cee1ec 100644 --- a/apps/meteor/client/sidebarv2/header/CreateTeamModal.tsx +++ b/apps/meteor/client/NavBarV2/NavBarPagesToolbar/actions/CreateTeamModal.tsx @@ -30,9 +30,9 @@ import type { ComponentProps, ReactElement } from 'react'; import { useId, memo, useEffect, useMemo } from 'react'; import { Controller, useForm } from 'react-hook-form'; -import { useEncryptedRoomDescription } from './hooks/useEncryptedRoomDescription'; -import UserAutoCompleteMultiple from '../../components/UserAutoCompleteMultiple'; -import { goToRoomById } from '../../lib/utils/goToRoomById'; +import { useEncryptedRoomDescription } from './useEncryptedRoomDescription'; +import UserAutoCompleteMultiple from '../../../components/UserAutoCompleteMultiple'; +import { goToRoomById } from '../../../lib/utils/goToRoomById'; type CreateTeamModalInputs = { name: string; diff --git a/apps/meteor/client/sidebarv2/header/hooks/useEncryptedRoomDescription.tsx b/apps/meteor/client/NavBarV2/NavBarPagesToolbar/actions/useEncryptedRoomDescription.tsx similarity index 100% rename from apps/meteor/client/sidebarv2/header/hooks/useEncryptedRoomDescription.tsx rename to apps/meteor/client/NavBarV2/NavBarPagesToolbar/actions/useEncryptedRoomDescription.tsx diff --git a/apps/meteor/client/sidebarv2/header/actions/hooks/useCreateRoomItems.tsx b/apps/meteor/client/NavBarV2/NavBarPagesToolbar/hooks/useCreateNewItems.tsx similarity index 84% rename from apps/meteor/client/sidebarv2/header/actions/hooks/useCreateRoomItems.tsx rename to apps/meteor/client/NavBarV2/NavBarPagesToolbar/hooks/useCreateNewItems.tsx index 4d313975d6f54..7ac76f3f7815e 100644 --- a/apps/meteor/client/sidebarv2/header/actions/hooks/useCreateRoomItems.tsx +++ b/apps/meteor/client/NavBarV2/NavBarPagesToolbar/hooks/useCreateNewItems.tsx @@ -1,18 +1,18 @@ 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'; +import { useCreateRoomModal } from './useCreateRoomModal'; +import CreateDiscussion from '../../../components/CreateDiscussion'; +import CreateChannelModal from '../actions/CreateChannelModal'; +import CreateDirectMessage from '../actions/CreateDirectMessage'; +import CreateTeamModal from '../actions/CreateTeamModal'; 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[] => { +export const useCreateNewItems = (): GenericMenuItemProps[] => { const t = useTranslation(); const discussionEnabled = useSetting('Discussion_enabled'); diff --git a/apps/meteor/client/sidebarv2/header/actions/hooks/useCreateRoomMenu.tsx b/apps/meteor/client/NavBarV2/NavBarPagesToolbar/hooks/useCreateNewMenu.tsx similarity index 81% rename from apps/meteor/client/sidebarv2/header/actions/hooks/useCreateRoomMenu.tsx rename to apps/meteor/client/NavBarV2/NavBarPagesToolbar/hooks/useCreateNewMenu.tsx index 795944b8d819a..781f7728bcfd7 100644 --- a/apps/meteor/client/sidebarv2/header/actions/hooks/useCreateRoomMenu.tsx +++ b/apps/meteor/client/NavBarV2/NavBarPagesToolbar/hooks/useCreateNewMenu.tsx @@ -1,20 +1,20 @@ import { useAtLeastOnePermission, useSetting } from '@rocket.chat/ui-contexts'; import { useTranslation } from 'react-i18next'; -import { useCreateRoomItems } from './useCreateRoomItems'; +import { useCreateNewItems } from './useCreateNewItems'; import { useMatrixFederationItems } from './useMatrixFederationItems'; -import { useIsEnterprise } from '../../../../hooks/useIsEnterprise'; +import { useIsEnterprise } from '../../../hooks/useIsEnterprise'; const CREATE_ROOM_PERMISSIONS = ['create-c', 'create-p', 'create-d', 'start-discussion', 'start-discussion-other-user']; -export const useCreateRoom = () => { +export const useCreateNewMenu = () => { const { t } = useTranslation(); const showCreate = useAtLeastOnePermission(CREATE_ROOM_PERMISSIONS); const { data } = useIsEnterprise(); const isMatrixEnabled = useSetting('Federation_Matrix_enabled') && data?.isEnterprise; - const createRoomItems = useCreateRoomItems(); + const createRoomItems = useCreateNewItems(); const matrixFederationSearchItems = useMatrixFederationItems({ isMatrixEnabled }); const sections = [ diff --git a/apps/meteor/client/sidebarv2/header/hooks/useCreateRoomModal.tsx b/apps/meteor/client/NavBarV2/NavBarPagesToolbar/hooks/useCreateRoomModal.tsx similarity index 100% rename from apps/meteor/client/sidebarv2/header/hooks/useCreateRoomModal.tsx rename to apps/meteor/client/NavBarV2/NavBarPagesToolbar/hooks/useCreateRoomModal.tsx diff --git a/apps/meteor/client/sidebarv2/header/actions/hooks/useGroupingListItems.spec.tsx b/apps/meteor/client/NavBarV2/NavBarPagesToolbar/hooks/useGroupingListItems.spec.tsx similarity index 100% rename from apps/meteor/client/sidebarv2/header/actions/hooks/useGroupingListItems.spec.tsx rename to apps/meteor/client/NavBarV2/NavBarPagesToolbar/hooks/useGroupingListItems.spec.tsx diff --git a/apps/meteor/client/sidebarv2/header/actions/hooks/useGroupingListItems.tsx b/apps/meteor/client/NavBarV2/NavBarPagesToolbar/hooks/useGroupingListItems.tsx similarity index 100% rename from apps/meteor/client/sidebarv2/header/actions/hooks/useGroupingListItems.tsx rename to apps/meteor/client/NavBarV2/NavBarPagesToolbar/hooks/useGroupingListItems.tsx diff --git a/apps/meteor/client/sidebarv2/header/actions/hooks/useMatrixFederationItems.ts b/apps/meteor/client/NavBarV2/NavBarPagesToolbar/hooks/useMatrixFederationItems.ts similarity index 82% rename from apps/meteor/client/sidebarv2/header/actions/hooks/useMatrixFederationItems.ts rename to apps/meteor/client/NavBarV2/NavBarPagesToolbar/hooks/useMatrixFederationItems.ts index cd0abc9bdfb20..2a90219e03fd7 100644 --- a/apps/meteor/client/sidebarv2/header/actions/hooks/useMatrixFederationItems.ts +++ b/apps/meteor/client/NavBarV2/NavBarPagesToolbar/hooks/useMatrixFederationItems.ts @@ -1,8 +1,8 @@ import type { GenericMenuItemProps } from '@rocket.chat/ui-client'; import { useTranslation } from 'react-i18next'; -import MatrixFederationSearch from '../../MatrixFederationSearch'; -import { useCreateRoomModal } from '../../hooks/useCreateRoomModal'; +import { useCreateRoomModal } from './useCreateRoomModal'; +import MatrixFederationSearch from '../../../sidebarv2/header/MatrixFederationSearch'; export const useMatrixFederationItems = ({ isMatrixEnabled, diff --git a/apps/meteor/client/sidebarv2/header/actions/hooks/useSortMenu.tsx b/apps/meteor/client/NavBarV2/NavBarPagesToolbar/hooks/useSortMenu.tsx similarity index 100% rename from apps/meteor/client/sidebarv2/header/actions/hooks/useSortMenu.tsx rename to apps/meteor/client/NavBarV2/NavBarPagesToolbar/hooks/useSortMenu.tsx diff --git a/apps/meteor/client/sidebarv2/header/actions/hooks/useSortModeItems.spec.tsx b/apps/meteor/client/NavBarV2/NavBarPagesToolbar/hooks/useSortModeItems.spec.tsx similarity index 100% rename from apps/meteor/client/sidebarv2/header/actions/hooks/useSortModeItems.spec.tsx rename to apps/meteor/client/NavBarV2/NavBarPagesToolbar/hooks/useSortModeItems.spec.tsx diff --git a/apps/meteor/client/sidebarv2/header/actions/hooks/useSortModeItems.tsx b/apps/meteor/client/NavBarV2/NavBarPagesToolbar/hooks/useSortModeItems.tsx similarity index 95% rename from apps/meteor/client/sidebarv2/header/actions/hooks/useSortModeItems.tsx rename to apps/meteor/client/NavBarV2/NavBarPagesToolbar/hooks/useSortModeItems.tsx index b0f77eab7a0a6..c1dfb4f3d71ec 100644 --- a/apps/meteor/client/sidebarv2/header/actions/hooks/useSortModeItems.tsx +++ b/apps/meteor/client/NavBarV2/NavBarPagesToolbar/hooks/useSortModeItems.tsx @@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next'; import { OmnichannelSortingDisclaimer, useOmnichannelSortingDisclaimer, -} from '../../../../components/Omnichannel/OmnichannelSortingDisclaimer'; +} from '../../../components/Omnichannel/OmnichannelSortingDisclaimer'; export const useSortModeItems = (): GenericMenuItemProps[] => { const { t } = useTranslation(); diff --git a/apps/meteor/client/sidebarv2/header/actions/hooks/useViewModeItems.spec.tsx b/apps/meteor/client/NavBarV2/NavBarPagesToolbar/hooks/useViewModeItems.spec.tsx similarity index 100% rename from apps/meteor/client/sidebarv2/header/actions/hooks/useViewModeItems.spec.tsx rename to apps/meteor/client/NavBarV2/NavBarPagesToolbar/hooks/useViewModeItems.spec.tsx diff --git a/apps/meteor/client/sidebarv2/header/actions/hooks/useViewModeItems.tsx b/apps/meteor/client/NavBarV2/NavBarPagesToolbar/hooks/useViewModeItems.tsx similarity index 100% rename from apps/meteor/client/sidebarv2/header/actions/hooks/useViewModeItems.tsx rename to apps/meteor/client/NavBarV2/NavBarPagesToolbar/hooks/useViewModeItems.tsx diff --git a/apps/meteor/client/NavBarV2/NavBarPagesToolbar/index.ts b/apps/meteor/client/NavBarV2/NavBarPagesToolbar/index.ts index 2b334cab4b2d2..4b711196e31f2 100644 --- a/apps/meteor/client/NavBarV2/NavBarPagesToolbar/index.ts +++ b/apps/meteor/client/NavBarV2/NavBarPagesToolbar/index.ts @@ -1,4 +1,5 @@ -export { default as NavBarItemAuditMenu } from './NavBarItemAuditMenu'; export { default as NavBarItemHomePage } from './NavBarItemHomePage'; export { default as NavBarItemMarketPlaceMenu } from './NavBarItemMarketPlaceMenu'; export { default as NavBarItemDirectoryPage } from './NavBarItemDirectoryPage'; +export { default as NavBarItemCreateNew } from './NavBarItemCreateNew'; +export { default as NavBarItemSort } from './NavBarItemSort'; diff --git a/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/NavBarItemAdministrationMenu.spec.tsx b/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/NavBarItemAdministrationMenu.spec.tsx new file mode 100644 index 0000000000000..9b010b2e5c087 --- /dev/null +++ b/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/NavBarItemAdministrationMenu.spec.tsx @@ -0,0 +1,70 @@ +import { mockAppRoot } from '@rocket.chat/mock-providers'; +import { render, screen, waitFor } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; + +import NavBarItemAdministrationMenu from './NavBarItemAdministrationMenu'; + +it('should not display the menu if no permission is set', async () => { + render(, { wrapper: mockAppRoot().build() }); + + expect(screen.queryByRole('button', { name: 'Manage' })).not.toBeInTheDocument(); +}); + +it('should display the workspace menu item if at least one admin permission is set', async () => { + render(, { wrapper: mockAppRoot().withPermission('access-permissions').build() }); + + const menuButton = await screen.findByRole('button', { name: 'Manage' }); + await userEvent.click(menuButton); + expect(await screen.findByRole('menuitem', { name: 'Workspace' })).toBeInTheDocument(); +}); + +it('should display the omnichannel menu item if view-livechat-manager permission is set', async () => { + render(, { + wrapper: mockAppRoot().withPermission('view-livechat-manager').withPermission('access-permissions').build(), + }); + + const menuButton = await screen.findByRole('button', { name: 'Manage' }); + await userEvent.click(menuButton); + expect(await screen.findByRole('menuitem', { name: 'Omnichannel' })).toBeInTheDocument(); +}); + +it('should not display any audit items if has at least one admin permission, some audit permission and the auditing module is not enabled', async () => { + render(, { + wrapper: mockAppRoot().withPermission('access-permissions').withPermission('can-audit').build(), + }); + + const menuButton = await screen.findByRole('button', { name: 'Manage' }); + await userEvent.click(menuButton); + + expect(screen.queryByRole('menuitem', { name: 'Messages' })).not.toBeInTheDocument(); +}); + +it('should display audit items if has at least one admin permission, both audit permission and the auditing module is enabled', async () => { + render(, { + wrapper: mockAppRoot() + .withEndpoint('GET', '/v1/licenses.info', () => ({ + license: { + license: { + // @ts-expect-error: just for testing + grantedModules: [{ module: 'auditing' }], + }, + // @ts-expect-error: just for testing + activeModules: ['auditing'], + }, + })) + .withJohnDoe() + .withPermission('can-audit') + .withPermission('can-audit-log') + .build(), + }); + + const menuButton = await screen.findByRole('button', { name: 'Manage' }); + await userEvent.click(menuButton); + + await waitFor(() => { + expect(screen.getByText('Messages')).toBeInTheDocument(); + }); + + expect(await screen.findByRole('menuitem', { name: 'Messages' })).toBeInTheDocument(); + expect(await screen.findByRole('menuitem', { name: 'Logs' })).toBeInTheDocument(); +}); diff --git a/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/NavBarItemAdministrationMenu.tsx b/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/NavBarItemAdministrationMenu.tsx index d4ff95ae9f632..ed451873a741e 100644 --- a/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/NavBarItemAdministrationMenu.tsx +++ b/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/NavBarItemAdministrationMenu.tsx @@ -5,6 +5,7 @@ import type { HTMLAttributes } from 'react'; import { useTranslation } from 'react-i18next'; import { useAdministrationMenu } from './hooks/useAdministrationMenu'; +import { useAuditMenu } from './hooks/useAuditMenu'; type NavBarItemAdministrationMenuProps = Omit, 'is'>; @@ -12,21 +13,20 @@ const NavBarItemAdministrationMenu = (props: NavBarItemAdministrationMenuProps) const { t } = useTranslation(); const currentRoute = useCurrentRoutePath(); - const sections = useAdministrationMenu(); + const adminSection = useAdministrationMenu(); + const auditSection = useAuditMenu(); - if (!sections[0].items.length) { + const adminRoutesRegex = new RegExp(['/omnichannel/', '/admin', '/audit'].join('|')); + const pressed = adminRoutesRegex.test(currentRoute || ''); + + const sections = [adminSection, auditSection].filter((section) => section.items.length > 0); + + if (sections.length === 0) { return null; } + return ( - + ); }; diff --git a/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/hooks/useUserMenu.tsx b/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/hooks/useUserMenu.tsx index 437a35c73833e..126f1665c5e7f 100644 --- a/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/hooks/useUserMenu.tsx +++ b/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/hooks/useUserMenu.tsx @@ -7,14 +7,12 @@ import { useTranslation } from 'react-i18next'; import UserMenuHeader from '../UserMenuHeader'; import { useAccountItems } from './useAccountItems'; import { useStatusItems } from './useStatusItems'; -import { useVoipItemsSection } from './useVoipItemsSection'; export const useUserMenu = (user: IUser) => { const { t } = useTranslation(); const statusItems = useStatusItems(); const accountItems = useAccountItems(); - const voipSection = useVoipItemsSection(); const logout = useLogout(); const handleLogout = useEffectEvent(() => { @@ -37,7 +35,6 @@ export const useUserMenu = (user: IUser) => { title: t('Status'), items: statusItems, }, - voipSection, { title: t('Account'), items: accountItems, diff --git a/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/hooks/useAdministrationMenu.spec.tsx b/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/hooks/useAdministrationMenu.spec.tsx index 55f92cde95762..6eb991ca61afb 100644 --- a/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/hooks/useAdministrationMenu.spec.tsx +++ b/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/hooks/useAdministrationMenu.spec.tsx @@ -20,7 +20,7 @@ it('should return omnichannel item if has `view-livechat-manager` permission ', }); await waitFor(() => - expect(result.current[0]?.items[0]).toEqual( + expect(result.current.items[0]).toEqual( expect.objectContaining({ id: 'omnichannel', }), @@ -45,7 +45,7 @@ it('should show administration item if has at least one admin permission', async }); await waitFor(() => - expect(result.current[0]?.items[0]).toEqual( + expect(result.current.items[0]).toEqual( expect.objectContaining({ id: 'workspace', }), diff --git a/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/hooks/useAdministrationMenu.tsx b/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/hooks/useAdministrationMenu.tsx index 01357109c0fe9..7d4190bd00b8e 100644 --- a/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/hooks/useAdministrationMenu.tsx +++ b/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/hooks/useAdministrationMenu.tsx @@ -48,10 +48,8 @@ export const useAdministrationMenu = () => { onClick: () => router.navigate('/omnichannel/current'), }; - return [ - { - title: t('Manage'), - items: [isAdmin && workspace, isOmnichannel && omnichannel].filter(Boolean) as GenericMenuItemProps[], - }, - ]; + return { + title: t('Manage'), + items: [isAdmin && workspace, isOmnichannel && omnichannel].filter(Boolean) as GenericMenuItemProps[], + }; }; diff --git a/apps/meteor/client/NavBarV2/NavBarPagesToolbar/hooks/useAuditMenu.spec.tsx b/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/hooks/useAuditMenu.spec.tsx similarity index 91% rename from apps/meteor/client/NavBarV2/NavBarPagesToolbar/hooks/useAuditMenu.spec.tsx rename to apps/meteor/client/NavBarV2/NavBarSettingsToolbar/hooks/useAuditMenu.spec.tsx index dbf16bc4dfb24..de197ab30f09f 100644 --- a/apps/meteor/client/NavBarV2/NavBarPagesToolbar/hooks/useAuditMenu.spec.tsx +++ b/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/hooks/useAuditMenu.spec.tsx @@ -18,7 +18,7 @@ it('should return an empty array of items if doesn`t have license', async () => .build(), }); - await waitFor(() => expect(result.current).toEqual([])); + await waitFor(() => expect(result.current.items).toEqual([])); }); it('should return an empty array of items if have license and not have permissions', async () => { @@ -39,7 +39,7 @@ it('should return an empty array of items if have license and not have permissio .build(), }); - await waitFor(() => expect(result.current).toEqual([])); + await waitFor(() => expect(result.current.items).toEqual([])); }); it('should return auditItems if have license and permissions', async () => { @@ -62,14 +62,14 @@ it('should return auditItems if have license and permissions', async () => { }); await waitFor(() => - expect(result.current[0]?.items[0]).toEqual( + expect(result.current.items[0]).toEqual( expect.objectContaining({ id: 'messages', }), ), ); - expect(result.current[0].items[1]).toEqual( + expect(result.current.items[1]).toEqual( expect.objectContaining({ id: 'auditLog', }), @@ -95,7 +95,7 @@ it('should return auditMessages item if have license and can-audit permission', }); await waitFor(() => - expect(result.current[0]?.items[0]).toEqual( + expect(result.current.items[0]).toEqual( expect.objectContaining({ id: 'messages', }), @@ -122,7 +122,7 @@ it('should return audiLogs item if have license and can-audit-log permission', a }); await waitFor(() => - expect(result.current[0]?.items[0]).toEqual( + expect(result.current.items[0]).toEqual( expect.objectContaining({ id: 'auditLog', }), diff --git a/apps/meteor/client/NavBarV2/NavBarPagesToolbar/hooks/useAuditMenu.tsx b/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/hooks/useAuditMenu.tsx similarity index 74% rename from apps/meteor/client/NavBarV2/NavBarPagesToolbar/hooks/useAuditMenu.tsx rename to apps/meteor/client/NavBarV2/NavBarSettingsToolbar/hooks/useAuditMenu.tsx index 7c0c36dc9f24a..be412480c3007 100644 --- a/apps/meteor/client/NavBarV2/NavBarPagesToolbar/hooks/useAuditMenu.tsx +++ b/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/hooks/useAuditMenu.tsx @@ -13,27 +13,20 @@ export const useAuditMenu = () => { const hasAuditPermission = usePermission('can-audit') && hasAuditLicense; const hasAuditLogPermission = usePermission('can-audit-log') && hasAuditLicense; - if (!hasAuditPermission && !hasAuditLogPermission) { - return []; - } - const auditMessageItem: GenericMenuItemProps = { id: 'messages', - icon: 'document-eye', content: t('Messages'), onClick: () => router.navigate('/audit'), }; + const auditLogItem: GenericMenuItemProps = { id: 'auditLog', - icon: 'document-eye', content: t('Logs'), onClick: () => router.navigate('/audit-log'), }; - return [ - { - title: t('Audit'), - items: [hasAuditPermission && auditMessageItem, hasAuditLogPermission && auditLogItem].filter(Boolean) as GenericMenuItemProps[], - }, - ]; + return { + title: t('Audit'), + items: [hasAuditPermission && auditMessageItem, hasAuditLogPermission && auditLogItem].filter(Boolean) as GenericMenuItemProps[], + }; }; diff --git a/apps/meteor/client/NavBarV2/NavBarVoipToolbar/NavBarItemVoipDialer.tsx b/apps/meteor/client/NavBarV2/NavBarVoipToolbar/NavBarItemVoipDialer.tsx index ce3f0b8294587..96f6248b6de24 100644 --- a/apps/meteor/client/NavBarV2/NavBarVoipToolbar/NavBarItemVoipDialer.tsx +++ b/apps/meteor/client/NavBarV2/NavBarVoipToolbar/NavBarItemVoipDialer.tsx @@ -37,7 +37,7 @@ const NavBarItemVoipDialer = (props: NavBarItemVoipDialerProps) => { { +type NavBarItemVoipDialerProps = Omit, 'is'> & { + primary?: boolean; +}; + +const NavBarItemVoipToggler = (props: NavBarItemVoipDialerProps) => { const { t } = useTranslation(); const dispatchToastMessage = useToastMessageDispatch(); @@ -35,7 +39,7 @@ export const useVoipItemsSection = (): { items: GenericMenuItemProps[] } | undef }, }); - const tooltip = useMemo(() => { + const title = useMemo(() => { if (clientError) { return t(clientError.message); } @@ -44,30 +48,18 @@ export const useVoipItemsSection = (): { items: GenericMenuItemProps[] } | undef return t('Loading'); } - return ''; - }, [clientError, isReady, toggleVoip.isPending, t]); - - return useMemo(() => { - if (!isEnabled) { - return; - } + return isRegistered ? t('Disable_voice_calling') : t('Enable_voice_calling'); + }, [clientError, isRegistered, isReady, toggleVoip.isPending, t]); - return { - items: [ - { - id: 'toggle-voip', - icon: isRegistered ? 'phone-disabled' : 'phone', - disabled: !isReady || toggleVoip.isPending, - onClick: () => toggleVoip.mutate(), - content: ( - - {isRegistered ? t('Disable_voice_calling') : t('Enable_voice_calling')} - - ), - }, - ], - }; - }, [isEnabled, isRegistered, isReady, tooltip, t, toggleVoip]); + return isEnabled ? ( + toggleVoip.mutate()} + /> + ) : null; }; -export default useVoipItemsSection; +export default NavBarItemVoipToggler; diff --git a/apps/meteor/client/NavBarV2/NavBarVoipToolbar/index.ts b/apps/meteor/client/NavBarV2/NavBarVoipToolbar/index.ts index 7f6d317af2298..6ea8fb777ffb7 100644 --- a/apps/meteor/client/NavBarV2/NavBarVoipToolbar/index.ts +++ b/apps/meteor/client/NavBarV2/NavBarVoipToolbar/index.ts @@ -1 +1,2 @@ export { default as NavBarItemVoipDialer } from './NavBarItemVoipDialer'; +export { default as NavBarItemVoipToggler } from './NavBarItemVoipToggler'; diff --git a/apps/meteor/client/sidebarv2/header/SearchSection.tsx b/apps/meteor/client/sidebarv2/header/SearchSection.tsx index 2fcdceb4ec035..4a4d3586ac2e7 100644 --- a/apps/meteor/client/sidebarv2/header/SearchSection.tsx +++ b/apps/meteor/client/sidebarv2/header/SearchSection.tsx @@ -8,8 +8,6 @@ import { useForm } from 'react-hook-form'; import tinykeys from 'tinykeys'; import SearchList from './SearchList'; -import CreateRoom from './actions/CreateRoom'; -import Sort from './actions/Sort'; const wrapperStyle = css` position: absolute; @@ -130,8 +128,6 @@ const SearchSection = () => { onClick={() => setRecentButtonPressed(!recentButtonPressed)} pressed={recentButtonPressed} /> - {recentButtonPressed ? : } - )} diff --git a/apps/meteor/tests/e2e/feature-preview.spec.ts b/apps/meteor/tests/e2e/feature-preview.spec.ts index a8b105222e4e3..60a634a193ca0 100644 --- a/apps/meteor/tests/e2e/feature-preview.spec.ts +++ b/apps/meteor/tests/e2e/feature-preview.spec.ts @@ -330,7 +330,7 @@ test.describe.serial('feature preview', () => { await page.goto('/home'); const message = 'hello world'; - await poHomeChannel.sidebar.setDisplayMode('Extended'); + await poHomeChannel.navbar.setDisplayMode('Extended'); await poHomeChannel.sidebar.openChat(sidepanelTeam); await poHomeChannel.content.sendMessage(message); await expect(poHomeChannel.sidepanel.getExtendedItem(sidepanelTeam, message)).toBeVisible(); @@ -341,7 +341,7 @@ test.describe.serial('feature preview', () => { const message = 'hello > world'; const parsedWrong = 'hello > world'; - await poHomeChannel.sidebar.setDisplayMode('Extended'); + await poHomeChannel.navbar.setDisplayMode('Extended'); await poHomeChannel.sidebar.openChat(sidepanelTeam); await poHomeChannel.content.sendMessage(message); diff --git a/apps/meteor/tests/e2e/page-objects/fragments/navbar.ts b/apps/meteor/tests/e2e/page-objects/fragments/navbar.ts index 55cda22ed09ef..2d0d68d17d028 100644 --- a/apps/meteor/tests/e2e/page-objects/fragments/navbar.ts +++ b/apps/meteor/tests/e2e/page-objects/fragments/navbar.ts @@ -18,4 +18,10 @@ export class Navbar { get homeButton(): Locator { return this.pagesToolbar.getByRole('button', { name: 'Home' }); } + + async setDisplayMode(mode: 'Extended' | 'Medium' | 'Condensed'): Promise { + await this.pagesToolbar.getByRole('button', { name: 'Display', exact: true }).click(); + await this.pagesToolbar.getByRole('menuitemcheckbox', { name: mode }).click(); + await this.pagesToolbar.click(); + } } diff --git a/apps/meteor/tests/e2e/page-objects/fragments/sidebar.ts b/apps/meteor/tests/e2e/page-objects/fragments/sidebar.ts index 6c546b2fc9368..4f0cefd6b7a80 100644 --- a/apps/meteor/tests/e2e/page-objects/fragments/sidebar.ts +++ b/apps/meteor/tests/e2e/page-objects/fragments/sidebar.ts @@ -42,12 +42,6 @@ export class Sidebar { return this.sidebarSearchSection.getByRole('searchbox'); } - async setDisplayMode(mode: 'Extended' | 'Medium' | 'Condensed'): Promise { - await this.sidebarSearchSection.getByRole('button', { name: 'Display', exact: true }).click(); - await this.sidebarSearchSection.getByRole('menuitemcheckbox', { name: mode }).click(); - await this.sidebarSearchSection.click(); - } - async escSearch(): Promise { await this.page.keyboard.press('Escape'); }