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

apps/meteor/client/views/admin/invites/InviteRow.tsx

@@ -0,0 +1,87 @@
+import type { IInvite } from '@rocket.chat/core-typings';
+import { Box, IconButton } from '@rocket.chat/fuselage';
+import { useMediaQuery } from '@rocket.chat/fuselage-hooks';
+import { GenericTableCell, GenericTableRow } from '@rocket.chat/ui-client';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import type { MouseEvent } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useFormatDateAndTime } from '../../../hooks/useFormatDateAndTime';
+import { useTimeFromNow } from '../../../hooks/useTimeFromNow';
+
+const isExpired = (expires: IInvite['expires']): boolean => {
+	if (expires && expires.getTime() < new Date().getTime()) {
+		return true;
+	}
+
+	return false;
+};
+
+export type InviteRowProps = Omit<IInvite, 'createdAt' | 'expires' | '_updatedAt'> & {
+	onRemove: (removeInvite: () => Promise<boolean>) => void;
+	_updatedAt: string;
+	createdAt: string;
+	expires: string | null;
+};
+
+const InviteRow = ({ _id, createdAt, expires, uses, maxUses, onRemove }: InviteRowProps) => {
+	const { t } = useTranslation();
+	const formatDateAndTime = useFormatDateAndTime();
+	const removeInvite = useEndpoint('DELETE', '/v1/removeInvite/:_id', { _id });
+
+	const getTimeFromNow = useTimeFromNow(false);
+
+	const daysToExpire = (expires: IInvite['expires']): string => {
+		if (expires) {
+			if (isExpired(expires)) {
+				return t('Expired');
+			}
+
+			return getTimeFromNow(expires);
+		}
+
+		return t('Never');
+	};
+
+	const maxUsesLeft = (maxUses: IInvite['maxUses'], uses: IInvite['uses']): number | string => {
+		if (maxUses > 0) {
+			if (uses >= maxUses) {
+				return 0;
+			}
+
+			return maxUses - uses;
+		}
+
+		return t('Unlimited');
+	};
+
+	const handleRemoveButtonClick = async (event: MouseEvent<HTMLElement>): Promise<void> => {
+		event.stopPropagation();
+		onRemove(() => removeInvite());
+	};
+
+	const notSmall = useMediaQuery('(min-width: 768px)');
+
+	return (
+		<GenericTableRow>
+			<GenericTableCell>
+				<Box color='hint' fontScale='p2'>
+					{_id}
+				</Box>
+			</GenericTableCell>
+			{notSmall && (
+				<>
+					<GenericTableCell>{formatDateAndTime(new Date(createdAt))}</GenericTableCell>
+					<GenericTableCell>{daysToExpire(expires ? new Date(expires) : null)}</GenericTableCell>
+					<GenericTableCell>{uses}</GenericTableCell>
+					<GenericTableCell>{maxUsesLeft(maxUses, uses)}</GenericTableCell>
+				</>
+			)}
+			<GenericTableCell>
+				<IconButton icon='cross' danger small onClick={handleRemoveButtonClick} />
+			</GenericTableCell>
+		</GenericTableRow>
+	);
+};
+
+export default InviteRow;

apps/meteor/client/views/admin/invites/InvitesPage.tsx

@@ -0,0 +1,129 @@
+import { States, StatesIcon, StatesTitle, StatesActions, StatesAction } from '@rocket.chat/fuselage';
+import { useMediaQuery } from '@rocket.chat/fuselage-hooks';
+import {
+	GenericModal,
+	GenericTable,
+	GenericTableBody,
+	GenericTableHeader,
+	GenericTableHeaderCell,
+	GenericTableLoadingTable,
+	Page,
+	PageHeader,
+	PageContent,
+} from '@rocket.chat/ui-client';
+import { useSetModal, useToastMessageDispatch, useTranslation, useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
+
+import InviteRow from './InviteRow';
+import GenericNoResults from '../../../components/GenericNoResults';
+
+const InvitesPage = () => {
+	const t = useTranslation();
+	const dispatchToastMessage = useToastMessageDispatch();
+	const setModal = useSetModal();
+
+	const getInvites = useEndpoint('GET', '/v1/listInvites');
+
+	const { data, isLoading, refetch, isSuccess, isError } = useQuery({
+		queryKey: ['invites'],
+		queryFn: async () => {
+			const invites = await getInvites();
+			return invites;
+		},
+		meta: {
+			apiErrorToastMessage: true,
+		},
+	});
+
+	const onRemove = (removeInvite: () => Promise<boolean>): void => {
+		const confirmRemove = async (): Promise<void> => {
+			try {
+				await removeInvite();
+				dispatchToastMessage({ type: 'success', message: t('Invite_removed') });
+				refetch();
+			} catch (error) {
+				if (typeof error === 'string' || error instanceof Error) {
+					dispatchToastMessage({ type: 'error', message: error });
+				}
+			} finally {
+				setModal();
+			}
+		};
+
+		setModal(
+			<GenericModal
+				title={t('Are_you_sure')}
+				variant='danger'
+				confirmText={t('Yes')}
+				cancelText={t('No')}
+				onClose={(): void => setModal()}
+				onCancel={(): void => setModal()}
+				onConfirm={confirmRemove}
+			>
+				{t('Are_you_sure_you_want_to_delete_this_record')}
+			</GenericModal>,
+		);
+	};
+
+	const notSmall = useMediaQuery('(min-width: 768px)');
+
+	const headers = useMemo(
+		() => (
+			<>
+				<GenericTableHeaderCell width={notSmall ? '20%' : '80%'}>{t('Token')}</GenericTableHeaderCell>
+				{notSmall && (
+					<>
+						<GenericTableHeaderCell width='35%'>{t('Created_at')}</GenericTableHeaderCell>
+						<GenericTableHeaderCell width='20%'>{t('Expiration')}</GenericTableHeaderCell>
+						<GenericTableHeaderCell width='10%'>{t('Uses')}</GenericTableHeaderCell>
+						<GenericTableHeaderCell width='10%'>{t('Uses_left')}</GenericTableHeaderCell>
+						<GenericTableHeaderCell />
+					</>
+				)}
+			</>
+		),
+		[notSmall, t],
+	);
+
+	return (
+		<Page>
+			<PageHeader title={t('Invites')} />
+			<PageContent>
+				<>
+					{isLoading && (
+						<GenericTable>
+							<GenericTableHeader>{headers}</GenericTableHeader>
+							<GenericTableBody>
+								<GenericTableLoadingTable headerCells={4} />
+							</GenericTableBody>
+						</GenericTable>
+					)}
+					{isSuccess && data && data.length > 0 && (
+						<GenericTable>
+							<GenericTableHeader>{headers}</GenericTableHeader>
+							<GenericTableBody>
+								{isLoading && <GenericTableLoadingTable headerCells={notSmall ? 4 : 1} />}
+								{data.map((invite) => (
+									<InviteRow key={invite._id} {...invite} onRemove={onRemove} />
+								))}
+							</GenericTableBody>
+						</GenericTable>
+					)}
+					{isSuccess && data?.length === 0 && <GenericNoResults />}
+					{isError && (
+						<States>
+							<StatesIcon name='warning' variation='danger' />
+							<StatesTitle>{t('Something_went_wrong')}</StatesTitle>
+							<StatesActions>
+								<StatesAction onClick={() => refetch()}>{t('Reload_page')}</StatesAction>
+							</StatesActions>
+						</States>
+					)}
+				</>
+			</PageContent>
+		</Page>
+	);
+};
+
+export default InvitesPage;

apps/meteor/client/views/admin/invites/InvitesRoute.tsx

@@ -0,0 +1,16 @@
+import { usePermission } from '@rocket.chat/ui-contexts';
+
+import InvitesPage from './InvitesPage';
+import NotAuthorizedPage from '../../notAuthorized/NotAuthorizedPage';
+
+const InvitesRoute = () => {
+	const canCreateInviteLinks = usePermission('create-invite-links');
+
+	if (!canCreateInviteLinks) {
+		return <NotAuthorizedPage />;
+	}
+
+	return <InvitesPage />;
+};
+
+export default InvitesRoute;