diff --git a/apps/meteor/client/sidebar/header/UserAvatarButton.tsx b/apps/meteor/client/sidebar/header/UserAvatarButton.tsx index 8c36d0daa6b8..e22b7c8deca0 100644 --- a/apps/meteor/client/sidebar/header/UserAvatarButton.tsx +++ b/apps/meteor/client/sidebar/header/UserAvatarButton.tsx @@ -1,6 +1,6 @@ import { css } from '@rocket.chat/css-in-js'; import { Box, Dropdown } from '@rocket.chat/fuselage'; -import { useUser } from '@rocket.chat/ui-contexts'; +import { useSetting, useUser } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React, { memo, useRef } from 'react'; import { createPortal } from 'react-dom'; @@ -22,6 +22,7 @@ const UserAvatarButton = (): ReactElement => { const user = useUser(); const { status = !user ? 'online' : 'offline', username, avatarETag, statusText } = user || anon; + const presenceDisabled = useSetting('Presence_broadcast_disabled'); // const allowAnonymousRead = useSetting('Accounts_AllowAnonymousRead'); @@ -59,7 +60,7 @@ const UserAvatarButton = (): ReactElement => { mie='neg-x2' mbe='neg-x2' > - + {user && diff --git a/apps/meteor/client/sidebar/header/UserDropdown.tsx b/apps/meteor/client/sidebar/header/UserDropdown.tsx index ce74cf4945ee..3229dd4dcfb9 100644 --- a/apps/meteor/client/sidebar/header/UserDropdown.tsx +++ b/apps/meteor/client/sidebar/header/UserDropdown.tsx @@ -13,7 +13,7 @@ import { } from '@rocket.chat/fuselage'; import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; import type { TranslationKey } from '@rocket.chat/ui-contexts'; -import { useLayout, useRole, useRoute, useLogout, useSetting, useTranslation, useSetModal } from '@rocket.chat/ui-contexts'; +import { useLayout, useRoute, useLogout, useSetting, useTranslation } from '@rocket.chat/ui-contexts'; import { useThemeMode } from '@rocket.chat/ui-theming/src/hooks/useThemeMode'; import type { ReactElement } from 'react'; import React from 'react'; @@ -21,12 +21,12 @@ import React from 'react'; import { AccountBox } from '../../../app/ui-utils/client'; import { userStatus } from '../../../app/user-status/client'; import { callbacks } from '../../../lib/callbacks'; -import GenericModal from '../../components/GenericModal'; import MarkdownText from '../../components/MarkdownText'; import { UserStatus } from '../../components/UserStatus'; import UserAvatar from '../../components/avatar/UserAvatar'; import { useUserDisplayName } from '../../hooks/useUserDisplayName'; import { imperativeModal } from '../../lib/imperativeModal'; +import { useStatusDisabledModal } from '../../views/admin/customUserStatus/hooks/useStatusDisabledModal'; import EditStatusModal from './EditStatusModal'; const isDefaultStatus = (id: string): boolean => (Object.values(UserStatusEnum) as string[]).includes(id); @@ -54,19 +54,11 @@ type UserDropdownProps = { const UserDropdown = ({ user, onClose }: UserDropdownProps): ReactElement => { const t = useTranslation(); const accountRoute = useRoute('account-index'); - const userStatusRoute = useRoute('user-status'); const logout = useLogout(); const { isMobile } = useLayout(); const presenceDisabled = useSetting('Presence_broadcast_disabled'); - const isAdmin = useRole('admin'); + const handleStatusDisabledModal = useStatusDisabledModal(); - const setModal = useSetModal(); - const closeModal = useMutableCallback(() => setModal()); - const handleGoToSettings = useMutableCallback(() => { - userStatusRoute.push({}); - closeModal(); - onClose(); - }); const [selectedTheme, setTheme] = useThemeMode(); const { username, avatarETag, status, statusText } = user; @@ -105,7 +97,7 @@ const UserDropdown = ({ user, onClose }: UserDropdownProps): ReactElement => { - + {displayName} @@ -126,36 +118,7 @@ const UserDropdown = ({ user, onClose }: UserDropdownProps): ReactElement => { {presenceDisabled && ( {t('User_status_disabled')} - - setModal( - isAdmin ? ( - - ) : ( - - ), - ) - } - > + {t('Learn_more')} diff --git a/apps/meteor/client/sidebar/sections/StatusDisabledSection.tsx b/apps/meteor/client/sidebar/sections/StatusDisabledSection.tsx index df2a238efb7f..fb12c3e6fc3b 100644 --- a/apps/meteor/client/sidebar/sections/StatusDisabledSection.tsx +++ b/apps/meteor/client/sidebar/sections/StatusDisabledSection.tsx @@ -1,52 +1,19 @@ import { SidebarBanner } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; -import { useRole, useRoute, useSetModal, useTranslation } from '@rocket.chat/ui-contexts'; +import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; -import GenericModal from '../../components/GenericModal'; +import { useStatusDisabledModal } from '../../views/admin/customUserStatus/hooks/useStatusDisabledModal'; const StatusDisabledSection = ({ onDismiss }: { onDismiss: () => void }) => { const t = useTranslation(); - const userStatusRoute = useRoute('user-status'); - const setModal = useSetModal(); - const closeModal = useMutableCallback(() => setModal()); - const handleGoToSettings = useMutableCallback(() => { - userStatusRoute.push({}); - closeModal(); - }); - const isAdmin = useRole('admin'); + const handleStatusDisabledModal = useStatusDisabledModal(); return ( - setModal( - isAdmin ? ( - - ) : ( - - ), - ) - } + onClick={handleStatusDisabledModal} /> ); }; diff --git a/apps/meteor/client/views/admin/customUserStatus/CustomUserStatusDisabledModal.tsx b/apps/meteor/client/views/admin/customUserStatus/CustomUserStatusDisabledModal.tsx new file mode 100644 index 000000000000..510d2d9303f4 --- /dev/null +++ b/apps/meteor/client/views/admin/customUserStatus/CustomUserStatusDisabledModal.tsx @@ -0,0 +1,34 @@ +import { useTranslation } from '@rocket.chat/ui-contexts'; +import React from 'react'; + +import GenericModal from '../../../components/GenericModal'; + +type CustomUserStatusDisabledModalProps = { isAdmin: boolean; onConfirm: () => void; onClose: () => void }; + +const CustomUserStatusDisabledModal = ({ isAdmin, onConfirm, onClose }: CustomUserStatusDisabledModalProps) => { + const t = useTranslation(); + return isAdmin ? ( + + ) : ( + + ); +}; + +export default CustomUserStatusDisabledModal; diff --git a/apps/meteor/client/views/admin/customUserStatus/CustomUserStatusRoute.tsx b/apps/meteor/client/views/admin/customUserStatus/CustomUserStatusRoute.tsx index 96f48b897338..d740c00a3b04 100644 --- a/apps/meteor/client/views/admin/customUserStatus/CustomUserStatusRoute.tsx +++ b/apps/meteor/client/views/admin/customUserStatus/CustomUserStatusRoute.tsx @@ -1,10 +1,11 @@ import { Button, ButtonGroup } from '@rocket.chat/fuselage'; -import { useRoute, useRouteParameter, usePermission, useTranslation } from '@rocket.chat/ui-contexts'; +import { useRoute, useRouteParameter, usePermission, useTranslation, useSetting } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; -import React, { useCallback, useRef } from 'react'; +import React, { useCallback, useRef, useEffect } from 'react'; import Page from '../../../components/Page'; import VerticalBar from '../../../components/VerticalBar'; +import { useIsEnterprise } from '../../../hooks/useIsEnterprise'; import NotAuthorizedPage from '../../notAuthorized/NotAuthorizedPage'; import CustomUserActiveConnections from './CustomUserActiveConnections'; import CustomUserStatusFormWithData from './CustomUserStatusFormWithData'; @@ -17,6 +18,12 @@ const CustomUserStatusRoute = (): ReactElement => { const context = useRouteParameter('context'); const id = useRouteParameter('id'); const canManageUserStatus = usePermission('manage-user-status'); + const { data: license } = useIsEnterprise(); + const presenceDisabled = useSetting('Presence_broadcast_disabled'); + + useEffect(() => { + presenceDisabled && route.push({ context: 'presence-service' }); + }, [presenceDisabled, route]); const handleItemClick = (id: string): void => { route.push({ @@ -51,7 +58,7 @@ const CustomUserStatusRoute = (): ReactElement => { - + {!license?.isEnterprise && } diff --git a/apps/meteor/client/views/admin/customUserStatus/CustomUserStatusService.tsx b/apps/meteor/client/views/admin/customUserStatus/CustomUserStatusService.tsx index 2a32dffff0f6..11511031a85a 100644 --- a/apps/meteor/client/views/admin/customUserStatus/CustomUserStatusService.tsx +++ b/apps/meteor/client/views/admin/customUserStatus/CustomUserStatusService.tsx @@ -26,10 +26,18 @@ const CustomUserStatusService = () => { const presenceDisabled = useSetting('Presence_broadcast_disabled'); const togglePresenceServiceEndpoint = useEndpoint('POST', '/v1/presence.enableBroadcast'); const disablePresenceService = useMutation(() => togglePresenceServiceEndpoint()); - const isEnterprise = useIsEnterprise(); + const { data: license, isLoading: licenseIsLoading } = useIsEnterprise(); - if (result.isLoading || disablePresenceService.isLoading) { - return ; + if (result.isLoading || disablePresenceService.isLoading || licenseIsLoading) { + return ( + + + + + + + + ); } if (result.isError || disablePresenceService.isError) { return ( @@ -54,18 +62,14 @@ const CustomUserStatusService = () => { disablePresenceService.mutate() - : undefined - } + onChange={() => disablePresenceService.mutate()} /> {t('Active_connections')} - {isEnterprise ? current : `${current}/${max}`} + {license?.isEnterprise ? current : `${current}/${max}`} - {!isEnterprise && 80 ? 'danger' : 'success'} />} + {!license?.isEnterprise && 80 ? 'danger' : 'success'} />} {presenceDisabled && ( @@ -75,14 +79,14 @@ const CustomUserStatusService = () => { )} - {isEnterprise ? ( + {license?.isEnterprise ? ( <> {t('Enterprise_cap_description')} {t('Larger_amounts_of_active_connections')}{' '} - + {t('multiple_instance_solutions')} @@ -99,10 +103,10 @@ const CustomUserStatusService = () => { )} - {!isEnterprise && ( + {!license?.isEnterprise && ( - diff --git a/apps/meteor/client/views/admin/customUserStatus/hooks/useStatusDisabledModal.tsx b/apps/meteor/client/views/admin/customUserStatus/hooks/useStatusDisabledModal.tsx new file mode 100644 index 000000000000..52f225234cce --- /dev/null +++ b/apps/meteor/client/views/admin/customUserStatus/hooks/useStatusDisabledModal.tsx @@ -0,0 +1,22 @@ +import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useRole, useRoute, useSetModal } from '@rocket.chat/ui-contexts'; +import React from 'react'; + +import CustomUserStatusDisabledModal from '../CustomUserStatusDisabledModal'; + +export const useStatusDisabledModal = () => { + const userStatusRoute = useRoute('user-status'); + const setModal = useSetModal(); + const closeModal = useMutableCallback(() => setModal()); + const handleGoToSettings = useMutableCallback(() => { + userStatusRoute.push({ context: 'presence-service' }); + closeModal(); + }); + const isAdmin = useRole('admin'); + + const handleSetModal = () => { + setModal(); + }; + + return handleSetModal; +}; diff --git a/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json b/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json index 37e7fce823a8..1c422946586d 100644 --- a/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json +++ b/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json @@ -5686,7 +5686,7 @@ "Service_disabled": "The service is now disabled", "Service_disabled_description": "You can't reenable it again until there's less than 200 active connections at the same time", "User_status_disabled": "User status temporarily disabled to maintain performance.", - "User_status_disabled_learn_more": "Keeping performance in mind", + "User_status_disabled_learn_more": "User status disabled", "User_status_disabled_learn_more_description": "Due to high volume of active connections, the service that handles user status is temporarily disabled. Administrators can re-enable this manually in the workspace settings.", "Go_to_workspace_settings": "Go to workspace settings", "User_status_temporarily_disabled": "User status temporarily disabled",