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

apps/meteor/client/views/outlookCalendar/OutlookEventsList/OutlookEventItem.tsx

@@ -0,0 +1,71 @@
+import type { ICalendarEvent, Serialized } from '@rocket.chat/core-typings';
+import { css } from '@rocket.chat/css-in-js';
+import { Box, Button, Palette } from '@rocket.chat/fuselage';
+import { useSetModal } from '@rocket.chat/ui-contexts';
+import { useTranslation } from 'react-i18next';
+
+import { useFormatDateAndTime } from '../../../hooks/useFormatDateAndTime';
+import { usePreventPropagation } from '../../../hooks/usePreventPropagation';
+import OutlookCalendarEventModal from '../OutlookCalendarEventModal';
+import { useOutlookOpenCall } from '../hooks/useOutlookOpenCall';
+
+export type OutlookEventItemProps = Serialized<ICalendarEvent>;
+
+const hovered = css`
+	&:hover {
+		cursor: pointer;
+	}
+
+	&:hover,
+	&:focus {
+		background: ${Palette.surface['surface-hover']};
+	}
+`;
+
+const OutlookEventItem = ({ subject, description, startTime, meetingUrl }: OutlookEventItemProps) => {
+	const { t } = useTranslation();
+	const setModal = useSetModal();
+	const formatDateAndTime = useFormatDateAndTime();
+	const openCall = useOutlookOpenCall(meetingUrl);
+	const handleMeetingClick = usePreventPropagation(openCall);
+
+	const handleOpenEvent = () => {
+		setModal(
+			<OutlookCalendarEventModal
+				onClose={() => setModal(null)}
+				onCancel={() => setModal(null)}
+				subject={subject}
+				meetingUrl={meetingUrl}
+				description={description}
+			/>,
+		);
+	};
+
+	return (
+		<Box
+			className={hovered}
+			borderBlockEndWidth={1}
+			borderBlockEndColor='stroke-extra-light'
+			borderBlockEndStyle='solid'
+			paddingInline={24}
+			paddingBlock={16}
+			display='flex'
+			justifyContent='space-between'
+			onClick={handleOpenEvent}
+		>
+			<Box>
+				<Box fontScale='h4'>{subject}</Box>
+				<Box fontScale='c1'>{formatDateAndTime(startTime)}</Box>
+			</Box>
+			<Box>
+				{meetingUrl && (
+					<Button onClick={handleMeetingClick} small>
+						{t('Join')}
+					</Button>
+				)}
+			</Box>
+		</Box>
+	);
+};
+
+export default OutlookEventItem;

apps/meteor/client/views/outlookCalendar/OutlookEventsList/OutlookEventItemContent.tsx

@@ -0,0 +1,24 @@
+import { Box } from '@rocket.chat/fuselage';
+import DOMPurify from 'dompurify';
+
+type SanitizeProps = {
+	html: string;
+	options?: {
+		[key: string]: string;
+	};
+};
+
+const OutlookEventItemContent = ({ html, options }: SanitizeProps) => {
+	const defaultOptions = {
+		ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a', 'br'],
+		ALLOWED_ATTR: ['href'],
+	};
+
+	const sanitize = (dirtyHTML: SanitizeProps['html'], options: SanitizeProps['options']) => ({
+		__html: DOMPurify.sanitize(dirtyHTML, { ...defaultOptions, ...options }).toString(),
+	});
+
+	return <Box wordBreak='break-word' color='default' dangerouslySetInnerHTML={sanitize(html, options)} />;
+};
+
+export default OutlookEventItemContent;

apps/meteor/client/views/outlookCalendar/OutlookEventsList/OutlookEventsList.tsx

@@ -0,0 +1,109 @@
+import { Box, States, StatesIcon, StatesTitle, StatesSubtitle, ButtonGroup, Button, Throbber } from '@rocket.chat/fuselage';
+import { useResizeObserver } from '@rocket.chat/fuselage-hooks';
+import {
+	VirtualizedScrollbars,
+	ContextualbarHeader,
+	ContextualbarIcon,
+	ContextualbarTitle,
+	ContextualbarClose,
+	ContextualbarContent,
+	ContextualbarFooter,
+	ContextualbarDialog,
+} from '@rocket.chat/ui-client';
+import { useTranslation, useUser } from '@rocket.chat/ui-contexts';
+import { Virtuoso } from 'react-virtuoso';
+
+import OutlookEventItem from './OutlookEventItem';
+import { getErrorMessage } from '../../../lib/errorHandling';
+import { useOutlookAuthentication } from '../hooks/useOutlookAuthentication';
+import { useMutationOutlookCalendarSync, useOutlookCalendarListForToday } from '../hooks/useOutlookCalendarList';
+import { NotOnDesktopError } from '../lib/NotOnDesktopError';
+
+export type OutlookEventsListProps = {
+	onClose: () => void;
+	changeRoute: () => void;
+};
+
+const OutlookEventsList = ({ onClose, changeRoute }: OutlookEventsListProps) => {
+	const t = useTranslation();
+	const user = useUser();
+	const { authEnabled, isError, error } = useOutlookAuthentication();
+
+	const hasOutlookMethods = !(isError && error instanceof NotOnDesktopError);
+
+	const syncOutlookCalendar = useMutationOutlookCalendarSync();
+
+	const calendarListResult = useOutlookCalendarListForToday();
+
+	const { ref, contentBoxSize: { inlineSize = 378, blockSize = 1 } = {} } = useResizeObserver<HTMLElement>({
+		debounceDelay: 200,
+	});
+
+	const calendarEvents = calendarListResult.data;
+	const total = calendarEvents?.length || 0;
+
+	const outlookUrl = user?.settings?.calendar?.outlook?.Outlook_Url;
+
+	return (
+		<ContextualbarDialog>
+			<ContextualbarHeader>
+				<ContextualbarIcon name='calendar' />
+				<ContextualbarTitle>{t('Outlook_calendar')}</ContextualbarTitle>
+				<ContextualbarClose onClick={onClose} />
+			</ContextualbarHeader>
+			<ContextualbarContent paddingInline={0} color='default'>
+				<Box flexGrow={1} flexShrink={1} overflow='hidden' display='flex' justifyContent='center' ref={ref}>
+					{calendarListResult.isPending && <Throbber size='x12' />}
+					{calendarListResult.isError && (
+						<States>
+							<StatesIcon name='circle-exclamation' variation='danger' />
+							<StatesTitle>{t('Something_went_wrong')}</StatesTitle>
+							<StatesSubtitle>{getErrorMessage(calendarListResult.error)}</StatesSubtitle>
+						</States>
+					)}
+					{!calendarListResult.isPending && total === 0 && (
+						<States>
+							<StatesIcon name='calendar' />
+							<StatesTitle>{t('No_history')}</StatesTitle>
+						</States>
+					)}
+					{calendarListResult.isSuccess && calendarListResult.data.length > 0 && (
+						<VirtualizedScrollbars>
+							<Virtuoso
+								style={{
+									height: blockSize,
+									width: inlineSize,
+								}}
+								totalCount={total}
+								overscan={25}
+								data={calendarEvents}
+								itemContent={(_index, calendarData) => <OutlookEventItem {...calendarData} />}
+							/>
+						</VirtualizedScrollbars>
+					)}
+				</Box>
+			</ContextualbarContent>
+			<ContextualbarFooter>
+				<ButtonGroup stretch>
+					{authEnabled && <Button onClick={changeRoute}>{t('Calendar_settings')}</Button>}
+					{outlookUrl && (
+						<Button icon='new-window' onClick={() => window.open(outlookUrl, '_blank')}>
+							{t('Open_Outlook')}
+						</Button>
+					)}
+				</ButtonGroup>
+				{hasOutlookMethods && (
+					<Box marginBlockStart={8}>
+						<ButtonGroup stretch>
+							<Button primary loading={syncOutlookCalendar.isPending} onClick={() => syncOutlookCalendar.mutate()}>
+								{authEnabled ? t('Sync') : t('Log_in_to_sync')}
+							</Button>
+						</ButtonGroup>
+					</Box>
+				)}
+			</ContextualbarFooter>
+		</ContextualbarDialog>
+	);
+};
+
+export default OutlookEventsList;

apps/meteor/client/views/outlookCalendar/OutlookEventsList/index.ts

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