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

apps/meteor/client/views/admin/settings/groups/OAuthGroupPage/CreateOAuthModal.spec.tsx

@@ -0,0 +1,47 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import CreateOAuthModal from './CreateOAuthModal';
+
+it('should call onClose when Cancel is clicked', async () => {
+	const onConfirm = jest.fn();
+	const onClose = jest.fn();
+
+	render(<CreateOAuthModal onConfirm={onConfirm} onClose={onClose} />, {
+		wrapper: mockAppRoot().build(),
+	});
+
+	await userEvent.click(screen.getByText('Cancel'));
+
+	expect(onClose).toHaveBeenCalled();
+});
+
+it('should call onClose when X is clicked', async () => {
+	const onConfirm = jest.fn();
+	const onClose = jest.fn();
+
+	render(<CreateOAuthModal onConfirm={onConfirm} onClose={onClose} />, {
+		wrapper: mockAppRoot().build(),
+	});
+
+	await userEvent.click(screen.getByLabelText('Close'));
+
+	expect(onClose).toHaveBeenCalled();
+});
+
+it('should call onConfirm when Add button is clicked', async () => {
+	const onConfirm = jest.fn();
+	const onClose = jest.fn();
+
+	render(<CreateOAuthModal onConfirm={onConfirm} onClose={onClose} />, {
+		wrapper: mockAppRoot().build(),
+	});
+
+	const custoOAuthNameInput = screen.getByLabelText('Custom_OAuth_name');
+	await userEvent.type(custoOAuthNameInput, 'Test');
+
+	await userEvent.click(screen.getByText('Add'));
+
+	await waitFor(() => expect(onConfirm).toHaveBeenCalled());
+});

apps/meteor/client/views/admin/settings/groups/OAuthGroupPage/CreateOAuthModal.tsx

@@ -0,0 +1,61 @@
+import { TextInput, Field, FieldLabel, FieldRow, FieldError, Box, FieldHint } from '@rocket.chat/fuselage';
+import { GenericModal } from '@rocket.chat/ui-client';
+import { useId } from 'react';
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+export type CreateOAuthModalProps = {
+	onConfirm: (text: string) => Promise<void>;
+	onClose: () => void;
+};
+
+type CreateOAuthModalFields = {
+	customOAuthName: string;
+};
+
+const CreateOAuthModal = ({ onConfirm, onClose }: CreateOAuthModalProps) => {
+	const {
+		register,
+		handleSubmit,
+		formState: { errors },
+	} = useForm<CreateOAuthModalFields>({
+		defaultValues: {
+			customOAuthName: '',
+		},
+	});
+
+	const { t } = useTranslation();
+
+	const customOAuthNameId = useId();
+
+	return (
+		<GenericModal
+			wrapperFunction={(props) => <Box is='form' onSubmit={handleSubmit(({ customOAuthName }) => onConfirm(customOAuthName))} {...props} />}
+			title={t('Add_custom_oauth')}
+			confirmText={t('Add')}
+			onCancel={onClose}
+			onClose={onClose}
+		>
+			<Field>
+				<FieldLabel htmlFor={customOAuthNameId}>{t('Custom_OAuth_name')}</FieldLabel>
+				<FieldRow>
+					<TextInput
+						id={customOAuthNameId}
+						{...register('customOAuthName', { required: t('Required_field', { field: t('Custom_OAuth_name') }) })}
+						aria-required='true'
+						aria-describedby={`${customOAuthNameId}-error ${customOAuthNameId}-hint`}
+						aria-label={t('Custom_OAuth_name')}
+					/>
+				</FieldRow>
+				<FieldHint id={`${customOAuthNameId}-hint`}>{t('Custom_OAuth_name_hint')}</FieldHint>
+				{errors.customOAuthName && (
+					<FieldError aria-live='assertive' id={`${customOAuthNameId}-error`}>
+						{errors.customOAuthName.message}
+					</FieldError>
+				)}
+			</Field>
+		</GenericModal>
+	);
+};
+
+export default CreateOAuthModal;

apps/meteor/client/views/admin/settings/groups/OAuthGroupPage/OAuthGroupPage.tsx

@@ -0,0 +1,143 @@
+import type { ISetting } from '@rocket.chat/core-typings';
+import { Button } from '@rocket.chat/fuselage';
+import { capitalize } from '@rocket.chat/tools';
+import { GenericModal } from '@rocket.chat/ui-client';
+import { useToastMessageDispatch, useAbsoluteUrl, useEndpoint, useTranslation, useSetModal } from '@rocket.chat/ui-contexts';
+import DOMPurify from 'dompurify';
+import { memo, useEffect, useState } from 'react';
+
+import CreateOAuthModal from './CreateOAuthModal';
+import { strRight } from '../../../../../../lib/utils/stringUtils';
+import { useEditableSettingsGroupSections } from '../../../EditableSettingsContext';
+import SettingsGroupPage from '../../SettingsGroupPage';
+import SettingsSection from '../../SettingsSection';
+
+export type OAuthGroupPageProps = ISetting & {
+	onClickBack?: () => void;
+};
+
+function OAuthGroupPage({ _id, onClickBack, ...group }: OAuthGroupPageProps) {
+	const sections = useEditableSettingsGroupSections(_id);
+	const solo = sections.length === 1;
+	const t = useTranslation();
+
+	const [settingSections, setSettingSections] = useState(sections);
+
+	const sectionIsCustomOAuth = (sectionName: string): string | boolean => sectionName && /^Custom OAuth:\s.+/.test(sectionName);
+
+	const getAbsoluteUrl = useAbsoluteUrl();
+
+	const callbackURL = (sectionName: string): string => {
+		const id = strRight(sectionName, 'Custom OAuth: ').toLowerCase();
+		return getAbsoluteUrl(`_oauth/${id}`);
+	};
+
+	const dispatchToastMessage = useToastMessageDispatch();
+	const refreshOAuthService = useEndpoint('POST', '/v1/settings.refreshOAuthServices');
+	const addOAuthService = useEndpoint('POST', '/v1/settings.addCustomOAuth');
+	const removeOAuthService = useEndpoint('POST', '/v1/settings.removeCustomOAuth');
+	const setModal = useSetModal();
+
+	const handleRefreshOAuthServicesButtonClick = async (): Promise<void> => {
+		dispatchToastMessage({ type: 'info', message: t('Refreshing') });
+		try {
+			await refreshOAuthService(undefined);
+			dispatchToastMessage({ type: 'success', message: t('Done') });
+		} catch (error) {
+			dispatchToastMessage({ type: 'error', message: error });
+		}
+	};
+
+	const handleAddCustomOAuthButtonClick = (): void => {
+		const onConfirm = async (text: string): Promise<void> => {
+			try {
+				await addOAuthService({ name: text });
+				dispatchToastMessage({ type: 'success', message: t('Custom_OAuth_has_been_added') });
+			} catch (error) {
+				dispatchToastMessage({ type: 'error', message: error });
+			} finally {
+				setModal(null);
+			}
+		};
+		setModal(<CreateOAuthModal onConfirm={onConfirm} onClose={(): void => setModal(null)} />);
+	};
+
+	useEffect(() => {
+		setSettingSections(sections);
+	}, [sections]);
+
+	const removeCustomOauthFactory =
+		(id: string): (() => void) =>
+		(): void => {
+			const handleConfirm = async (): Promise<void> => {
+				try {
+					await removeOAuthService({ name: id });
+					dispatchToastMessage({ type: 'success', message: t('Custom_OAuth_has_been_removed') });
+					setSettingSections(settingSections.filter((section) => section !== `Custom OAuth: ${capitalize(id)}`));
+				} catch (error) {
+					dispatchToastMessage({ type: 'error', message: error });
+				} finally {
+					setModal(null);
+				}
+			};
+
+			setModal(
+				<GenericModal
+					onClose={() => setModal(null)}
+					onCancel={() => setModal(null)}
+					title={t('Are_you_sure')}
+					variant='danger'
+					confirmText={t('Yes_delete_it')}
+					onConfirm={handleConfirm}
+				/>,
+			);
+		};
+
+	return (
+		<SettingsGroupPage
+			_id={_id}
+			{...group}
+			onClickBack={onClickBack}
+			headerButtons={
+				<>
+					<Button onClick={handleRefreshOAuthServicesButtonClick}>{t('Refresh_oauth_services')}</Button>
+					<Button onClick={handleAddCustomOAuthButtonClick}>{t('Add_custom_oauth')}</Button>
+				</>
+			}
+		>
+			{settingSections.map((sectionName) => {
+				if (sectionIsCustomOAuth(sectionName)) {
+					const id = strRight(sectionName, 'Custom OAuth: ').toLowerCase();
+
+					const handleRemoveCustomOAuthButtonClick = removeCustomOauthFactory(id);
+
+					return (
+						<SettingsSection
+							key={sectionName}
+							groupId={_id}
+							help={
+								<span
+									dangerouslySetInnerHTML={{
+										__html: DOMPurify.sanitize(t('Custom_oauth_helper', { url: callbackURL(sectionName) })),
+									}}
+								/>
+							}
+							sectionName={sectionName}
+							solo={solo}
+						>
+							<div className='submit'>
+								<Button secondary danger onClick={handleRemoveCustomOAuthButtonClick}>
+									{t('Remove_custom_oauth')}
+								</Button>
+							</div>
+						</SettingsSection>
+					);
+				}
+
+				return <SettingsSection key={sectionName} groupId={_id} sectionName={sectionName} solo={solo} />;
+			})}
+		</SettingsGroupPage>
+	);
+}
+
+export default memo(OAuthGroupPage);

apps/meteor/client/views/admin/settings/groups/OAuthGroupPage/index.ts

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