snapshot of https://github.com/RocketChat/Rocket.Chat.git (develop, 2026-09-16; blobs > 131072B omitted)

apps/meteor/client/views/admin/deviceManagement/DeviceManagementAdminPage.tsx

@@ -0,0 +1,31 @@
+import { ContextualbarDialog, Page, PageHeader, PageContent } from '@rocket.chat/ui-client';
+import { useRouteParameter, useRouter } from '@rocket.chat/ui-contexts';
+import { useTranslation } from 'react-i18next';
+
+import DeviceManagementAdminTable from './DeviceManagementAdminTable';
+import DeviceManagementInfo from './DeviceManagementInfo';
+
+const DeviceManagementAdminPage = () => {
+	const { t } = useTranslation();
+	const router = useRouter();
+	const context = useRouteParameter('context');
+	const deviceId = useRouteParameter('id');
+
+	return (
+		<Page flexDirection='row'>
+			<Page>
+				<PageHeader title={t('Device_Management')} />
+				<PageContent>
+					<DeviceManagementAdminTable />
+				</PageContent>
+			</Page>
+			{context === 'info' && deviceId && (
+				<ContextualbarDialog onClose={() => router.navigate('/admin/device-management')}>
+					<DeviceManagementInfo deviceId={deviceId} />
+				</ContextualbarDialog>
+			)}
+		</Page>
+	);
+};
+
+export default DeviceManagementAdminPage;

apps/meteor/client/views/admin/deviceManagement/DeviceManagementAdminRoute.tsx

@@ -0,0 +1,52 @@
+import { usePermission, useRouter, useSetModal, useCurrentModal } from '@rocket.chat/ui-contexts';
+import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import DeviceManagementAdminPage from './DeviceManagementAdminPage';
+import GenericUpsellModal from '../../../components/GenericUpsellModal';
+import { useUpsellActions } from '../../../components/GenericUpsellModal/hooks';
+import PageSkeleton from '../../../components/PageSkeleton';
+import { useHasLicenseModule } from '../../../hooks/useHasLicenseModule';
+import { getURL } from '../../../lib/getURL';
+import NotAuthorizedPage from '../../notAuthorized/NotAuthorizedPage';
+
+const DeviceManagementAdminRoute = () => {
+	const { t } = useTranslation();
+	const router = useRouter();
+	const setModal = useSetModal();
+	const isModalOpen = !!useCurrentModal();
+
+	const { data: hasDeviceManagement = false, isPending } = useHasLicenseModule('device-management');
+	const canViewDeviceManagement = usePermission('view-device-management');
+
+	const { shouldShowUpsell, handleManageSubscription } = useUpsellActions(hasDeviceManagement);
+
+	useEffect(() => {
+		if (shouldShowUpsell) {
+			setModal(
+				<GenericUpsellModal
+					aria-label={t('Device_Management')}
+					title={t('Device_Management')}
+					img={getURL('images/device-management.png')}
+					subtitle={t('Ensure_secure_workspace_access')}
+					description={t('Manage_which_devices')}
+					onClose={() => setModal(null)}
+					onConfirm={handleManageSubscription}
+					onCancel={() => setModal(null)}
+				/>,
+			);
+		}
+	}, [shouldShowUpsell, router, setModal, t, handleManageSubscription]);
+
+	if (isModalOpen || isPending) {
+		return <PageSkeleton />;
+	}
+
+	if (!canViewDeviceManagement || !hasDeviceManagement) {
+		return <NotAuthorizedPage />;
+	}
+
+	return <DeviceManagementAdminPage />;
+};
+
+export default DeviceManagementAdminRoute;

apps/meteor/client/views/admin/deviceManagement/DeviceManagementAdminTable/DeviceManagementAdminRow.tsx

@@ -0,0 +1,89 @@
+import { Box } from '@rocket.chat/fuselage';
+import { useMediaQuery, useStableCallback } from '@rocket.chat/fuselage-hooks';
+import type { GenericMenuItemProps } from '@rocket.chat/ui-client';
+import { GenericMenu, GenericTableRow, GenericTableCell } from '@rocket.chat/ui-client';
+import { useRoute } from '@rocket.chat/ui-contexts';
+import type { KeyboardEvent } from 'react';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import DeviceIcon from '../../../../components/deviceManagement/DeviceIcon';
+import { useDeviceLogout } from '../../../../hooks/useDeviceLogout';
+import { useFormatDateAndTime } from '../../../../hooks/useFormatDateAndTime';
+
+type DeviceRowProps = {
+	_id: string;
+	username?: string;
+	ip: string;
+	deviceName?: string;
+	deviceType?: string;
+	deviceOSName?: string;
+	loginAt: string;
+	rcVersion?: string;
+};
+
+const DeviceManagementAdminRow = ({
+	_id,
+	username,
+	ip,
+	deviceName,
+	deviceType = 'browser',
+	deviceOSName = '',
+	loginAt,
+	rcVersion,
+}: DeviceRowProps) => {
+	const { t } = useTranslation();
+	const deviceManagementRouter = useRoute('device-management');
+	const formatDateAndTime = useFormatDateAndTime();
+	const mediaQuery = useMediaQuery('(min-width: 1024px)');
+
+	const handleDeviceLogout = useDeviceLogout(_id, '/v1/sessions/logout');
+
+	const handleClick = useStableCallback((): void => {
+		deviceManagementRouter.push({
+			context: 'info',
+			id: _id,
+		});
+	});
+
+	const handleKeyDown = useCallback(
+		(e: KeyboardEvent<HTMLOrSVGElement>): void => {
+			if (!['Enter', 'Space'].includes(e.nativeEvent.code)) {
+				return;
+			}
+			handleClick();
+		},
+		[handleClick],
+	);
+
+	const menuItems: GenericMenuItemProps[] = [
+		{
+			id: 'logoutDevice',
+			icon: 'sign-out',
+			content: t('Logout_Device'),
+			onClick: () => handleDeviceLogout(),
+		},
+	];
+
+	return (
+		<GenericTableRow key={_id} onKeyDown={handleKeyDown} onClick={handleClick} tabIndex={0} action aria-label={_id}>
+			<GenericTableCell>
+				<Box display='flex' alignItems='center'>
+					<DeviceIcon deviceType={deviceType} />
+					{deviceName && <Box withTruncatedText>{deviceName}</Box>}
+				</Box>
+			</GenericTableCell>
+			<GenericTableCell>{rcVersion}</GenericTableCell>
+			<GenericTableCell>{deviceOSName}</GenericTableCell>
+			<GenericTableCell withTruncatedText>{username}</GenericTableCell>
+			{mediaQuery && <GenericTableCell>{formatDateAndTime(loginAt)}</GenericTableCell>}
+			{mediaQuery && <GenericTableCell withTruncatedText>{_id}</GenericTableCell>}
+			{mediaQuery && <GenericTableCell withTruncatedText>{ip}</GenericTableCell>}
+			<GenericTableCell onClick={(e) => e.stopPropagation()}>
+				<GenericMenu detached placement='bottom-end' title={t('Options')} items={menuItems} />
+			</GenericTableCell>
+		</GenericTableRow>
+	);
+};
+
+export default DeviceManagementAdminRow;

apps/meteor/client/views/admin/deviceManagement/DeviceManagementAdminTable/DeviceManagementAdminTable.tsx

@@ -0,0 +1,105 @@
+import type { DeviceManagementPopulatedSession, DeviceManagementSession, Serialized } from '@rocket.chat/core-typings';
+import { useDebouncedValue, useMediaQuery } from '@rocket.chat/fuselage-hooks';
+import { GenericTableHeaderCell, usePagination, useSort } from '@rocket.chat/ui-client';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+import { useState, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import DeviceManagementAdminRow from './DeviceManagementAdminRow';
+import FilterByText from '../../../../components/FilterByText';
+import DeviceManagementTable from '../../../../components/deviceManagement/DeviceManagementTable';
+import { deviceManagementQueryKeys } from '../../../../lib/queryKeys';
+
+const sortMapping = {
+	client: 'device.name',
+	username: '_user.username',
+	os: 'device.os.name',
+	loginAt: 'loginAt',
+};
+
+const isSessionPopulatedSession = (
+	session: Serialized<DeviceManagementPopulatedSession | DeviceManagementSession>,
+): session is Serialized<DeviceManagementPopulatedSession> => '_user' in session;
+
+const DeviceManagementAdminTable = () => {
+	const { t } = useTranslation();
+	const [text, setText] = useState('');
+	const { current, itemsPerPage, setCurrent, setItemsPerPage, ...paginationProps } = usePagination();
+	const { sortBy, sortDirection, setSort } = useSort<'client' | 'os' | 'username' | 'loginAt'>('username');
+
+	const query = useDebouncedValue(
+		useMemo(
+			() => ({
+				filter: text,
+				sort: JSON.stringify({ [sortMapping[sortBy]]: sortDirection === 'asc' ? 1 : -1 }),
+				count: itemsPerPage,
+				offset: text ? undefined : current,
+			}),
+			[text, itemsPerPage, current, sortBy, sortDirection],
+		),
+		500,
+	);
+
+	const listAllSessions = useEndpoint('GET', '/v1/sessions/list.all');
+	const queryResult = useQuery({
+		queryKey: deviceManagementQueryKeys.sessions(query),
+		queryFn: () => listAllSessions(query),
+	});
+
+	const mediaQuery = useMediaQuery('(min-width: 1024px)');
+
+	const headers = useMemo(
+		() => [
+			<GenericTableHeaderCell key='client' direction={sortDirection} active={sortBy === 'client'} onClick={setSort} sort='client'>
+				{t('Client')}
+			</GenericTableHeaderCell>,
+			<GenericTableHeaderCell key='rcVersion'>{t('Version')}</GenericTableHeaderCell>,
+			<GenericTableHeaderCell key='os' direction={sortDirection} active={sortBy === 'os'} onClick={setSort} sort='os'>
+				{t('OS')}
+			</GenericTableHeaderCell>,
+			<GenericTableHeaderCell key='username' direction={sortDirection} active={sortBy === 'username'} onClick={setSort} sort='username'>
+				{t('User')}
+			</GenericTableHeaderCell>,
+			mediaQuery && (
+				<GenericTableHeaderCell key='loginAt' direction={sortDirection} active={sortBy === 'loginAt'} onClick={setSort} sort='loginAt'>
+					{t('Last_login')}
+				</GenericTableHeaderCell>
+			),
+			mediaQuery && <GenericTableHeaderCell key='_id'>{t('Device_ID')}</GenericTableHeaderCell>,
+			mediaQuery && <GenericTableHeaderCell key='ip'>{t('IP_Address')}</GenericTableHeaderCell>,
+			<GenericTableHeaderCell width='5%' key='menu' />,
+		],
+		[t, mediaQuery, setSort, sortDirection, sortBy],
+	);
+
+	return (
+		<>
+			<FilterByText placeholder={t('Search_Devices_Users')} value={text} onChange={(event) => setText(event.target.value)} />
+			<DeviceManagementTable
+				{...queryResult}
+				headers={headers}
+				renderRow={(session) => (
+					<DeviceManagementAdminRow
+						key={session._id}
+						_id={session._id}
+						username={isSessionPopulatedSession(session) ? session._user?.username : ''}
+						ip={session.ip}
+						deviceName={session?.device?.name}
+						deviceType={session?.device?.type}
+						deviceOSName={session?.device?.os?.name}
+						rcVersion={session?.device?.version}
+						loginAt={session.loginAt}
+					/>
+				)}
+				current={current}
+				itemsPerPage={itemsPerPage}
+				setCurrent={setCurrent}
+				setItemsPerPage={setItemsPerPage}
+				paginationProps={paginationProps}
+			/>
+		</>
+	);
+};
+
+export default DeviceManagementAdminTable;

apps/meteor/client/views/admin/deviceManagement/DeviceManagementAdminTable/index.ts

@@ -0,0 +1 @@
+export { default } from './DeviceManagementAdminTable';

apps/meteor/client/views/admin/deviceManagement/DeviceManagementInfo/DeviceManagementInfo.tsx

@@ -0,0 +1,103 @@
+import type { DeviceManagementPopulatedSession } from '@rocket.chat/core-typings';
+import { Box, Button, ButtonGroup, StatusBullet } from '@rocket.chat/fuselage';
+import { UserAvatar } from '@rocket.chat/ui-avatar';
+import {
+	ContextualbarHeader,
+	ContextualbarClose,
+	ContextualbarScrollableContent,
+	ContextualbarFooter,
+	ContextualbarTitle,
+	InfoPanel,
+	InfoPanelField,
+	InfoPanelLabel,
+	InfoPanelText,
+} from '@rocket.chat/ui-client';
+import { useRoute, useUserPresence } from '@rocket.chat/ui-contexts';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useDeviceLogout } from '../../../../hooks/useDeviceLogout';
+import { useFormatDateAndTime } from '../../../../hooks/useFormatDateAndTime';
+
+export type DeviceManagementInfoProps = DeviceManagementPopulatedSession;
+
+const DeviceManagementInfo = ({ device, sessionId, loginAt, ip, userId, _user }: DeviceManagementInfoProps) => {
+	const { t } = useTranslation();
+	const deviceManagementRouter = useRoute('device-management');
+	const formatDateAndTime = useFormatDateAndTime();
+
+	const handleDeviceLogout = useDeviceLogout(sessionId, '/v1/sessions/logout');
+
+	const { name: clientName, os, version: rcVersion } = device || {};
+	const { username, name } = _user || {};
+	const userPresence = useUserPresence(userId);
+
+	const handleCloseContextualBar = useCallback((): void => deviceManagementRouter.push({}), [deviceManagementRouter]);
+
+	return (
+		<>
+			<ContextualbarHeader>
+				<ContextualbarTitle>{t('Device_Info')}</ContextualbarTitle>
+				<ContextualbarClose onClick={handleCloseContextualBar} />
+			</ContextualbarHeader>
+			<ContextualbarScrollableContent>
+				<InfoPanel>
+					<InfoPanelField>
+						<InfoPanelLabel>{t('Client')}</InfoPanelLabel>
+						<InfoPanelText>{clientName}</InfoPanelText>
+					</InfoPanelField>
+
+					<InfoPanelField>
+						<InfoPanelLabel>{t('Version')}</InfoPanelLabel>
+						<InfoPanelText>{rcVersion || '—'}</InfoPanelText>
+					</InfoPanelField>
+
+					<InfoPanelField>
+						<InfoPanelLabel>{t('OS')}</InfoPanelLabel>
+						<InfoPanelText>{`${os?.name || ''} ${os?.version || ''}`}</InfoPanelText>
+					</InfoPanelField>
+
+					{username && (
+						<InfoPanelField>
+							<InfoPanelLabel>{t('User')}</InfoPanelLabel>
+							<Box>
+								<UserAvatar username={username} etag={userPresence?.avatarETag} />
+								<Box is='span' paddingInline={8}>
+									<StatusBullet status={userPresence?.status} />
+								</Box>
+								{name && <Box is='span'>{name}</Box>}
+								<Box is='span' color='hint'>
+									{`(${username})`}
+								</Box>
+							</Box>
+						</InfoPanelField>
+					)}
+
+					<InfoPanelField>
+						<InfoPanelLabel>{t('Last_login')}</InfoPanelLabel>
+						<InfoPanelText>{formatDateAndTime(loginAt)}</InfoPanelText>
+					</InfoPanelField>
+
+					<InfoPanelField>
+						<InfoPanelLabel>{t('Device_ID')}</InfoPanelLabel>
+						<InfoPanelText>{sessionId}</InfoPanelText>
+					</InfoPanelField>
+
+					<InfoPanelField>
+						<InfoPanelLabel>{t('IP_Address')}</InfoPanelLabel>
+						<InfoPanelText>{ip}</InfoPanelText>
+					</InfoPanelField>
+				</InfoPanel>
+			</ContextualbarScrollableContent>
+			<ContextualbarFooter>
+				<ButtonGroup stretch>
+					<Button primary onClick={() => handleDeviceLogout()}>
+						{t('Logout_Device')}
+					</Button>
+				</ButtonGroup>
+			</ContextualbarFooter>
+		</>
+	);
+};
+
+export default DeviceManagementInfo;

apps/meteor/client/views/admin/deviceManagement/DeviceManagementInfo/DeviceManagementInfoWithData.tsx

@@ -0,0 +1,66 @@
+import type { Serialized, DeviceManagementPopulatedSession } from '@rocket.chat/core-typings';
+import { Box, States, StatesIcon, StatesTitle, StatesSubtitle } from '@rocket.chat/fuselage';
+import {
+	ContextualbarHeader,
+	ContextualbarClose,
+	ContextualbarContent,
+	ContextualbarTitle,
+	ContextualbarSkeletonBody,
+} from '@rocket.chat/ui-client';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+
+import DeviceManagementInfo from './DeviceManagementInfo';
+import { deviceManagementQueryKeys } from '../../../../lib/queryKeys';
+
+const convertSessionFromAPI = ({
+	loginAt,
+	logoutAt,
+	...rest
+}: Serialized<DeviceManagementPopulatedSession>): DeviceManagementPopulatedSession => ({
+	loginAt: new Date(loginAt),
+	...(logoutAt && { logoutAt: new Date(logoutAt) }),
+	...rest,
+});
+
+export type DeviceInfoWithDataProps = { deviceId: string };
+
+const DeviceInfoWithData = ({ deviceId }: DeviceInfoWithDataProps) => {
+	const { t } = useTranslation();
+
+	const getSessionInfo = useEndpoint('GET', '/v1/sessions/info.admin');
+	const { isPending, isError, error, data } = useQuery({
+		queryKey: deviceManagementQueryKeys.sessionInfo(deviceId),
+		queryFn: () => getSessionInfo({ sessionId: deviceId }),
+	});
+
+	if (isPending) {
+		return <ContextualbarSkeletonBody />;
+	}
+
+	if (isError) {
+		return (
+			<>
+				<ContextualbarHeader>
+					<ContextualbarTitle>{t('Device_Info')}</ContextualbarTitle>
+					<ContextualbarClose />
+				</ContextualbarHeader>
+				<ContextualbarContent>
+					<Box display='flex' justifyContent='center' alignItems='center' height='100%'>
+						<States>
+							<StatesIcon name='warning' variation='danger' />
+							<StatesTitle>{t('Something_went_wrong')}</StatesTitle>
+							<StatesSubtitle>{t('We_Could_not_retrive_any_data')}</StatesSubtitle>
+							<StatesSubtitle>{error.message}</StatesSubtitle>
+						</States>
+					</Box>
+				</ContextualbarContent>
+			</>
+		);
+	}
+
+	return <DeviceManagementInfo {...convertSessionFromAPI(data)} />;
+};
+
+export default DeviceInfoWithData;

apps/meteor/client/views/admin/deviceManagement/DeviceManagementInfo/index.ts

@@ -0,0 +1 @@
+export { default } from './DeviceManagementInfoWithData';