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

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';