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

apps/meteor/client/views/admin/integrations/incoming/EditIncomingWebhook.tsx

@@ -0,0 +1,134 @@
+import type { IIncomingIntegration, Serialized } from '@rocket.chat/core-typings';
+import { Button, ButtonGroup, Tabs, TabsItem } from '@rocket.chat/fuselage';
+import { GenericModal, Page, PageHeader, PageScrollableContentWithShadow, PageFooter } from '@rocket.chat/ui-client';
+import { useSetModal, useTranslation, useRouter, useRouteParameter } from '@rocket.chat/ui-contexts';
+import { useId, useCallback } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+
+import IncomingWebhookForm from './IncomingWebhookForm';
+import { useCreateIntegration } from '../hooks/useCreateIntegration';
+import { useDeleteIntegration } from '../hooks/useDeleteIntegration';
+import { useUpdateIntegration } from '../hooks/useUpdateIntegration';
+
+export type EditIncomingWebhookFormData = {
+	enabled: boolean;
+	channel: string;
+	username: string;
+	name: string;
+	alias: string;
+	avatar: string;
+	emoji: string;
+	scriptEnabled: boolean;
+	scriptEngine: 'isolated-vm';
+	overrideDestinationChannelEnabled: boolean;
+	script: string;
+};
+
+const getInitialValue = (webhookData: Serialized<IIncomingIntegration> | undefined): EditIncomingWebhookFormData => ({
+	enabled: webhookData?.enabled ?? true,
+	channel: webhookData?.channel.join(', ') ?? '',
+	username: webhookData?.username ?? '',
+	name: webhookData?.name ?? '',
+	alias: webhookData?.alias ?? '',
+	avatar: webhookData?.avatar ?? '',
+	emoji: webhookData?.emoji ?? '',
+	scriptEnabled: webhookData?.scriptEnabled ?? false,
+	scriptEngine: webhookData?.scriptEngine ?? 'isolated-vm',
+	overrideDestinationChannelEnabled: webhookData?.overrideDestinationChannelEnabled ?? false,
+	script: webhookData?.script ?? '',
+});
+
+const INCOMING_TYPE = 'webhook-incoming';
+
+export type EditIncomingWebhookProps = {
+	webhookData?: Serialized<IIncomingIntegration>;
+};
+
+const EditIncomingWebhook = ({ webhookData }: EditIncomingWebhookProps) => {
+	const t = useTranslation();
+	const router = useRouter();
+	const setModal = useSetModal();
+	const tab = useRouteParameter('type');
+
+	const deleteIntegration = useDeleteIntegration(INCOMING_TYPE);
+	const updateIntegration = useUpdateIntegration(INCOMING_TYPE);
+	const createIntegration = useCreateIntegration(INCOMING_TYPE);
+
+	const methods = useForm<EditIncomingWebhookFormData>({ mode: 'onBlur', values: getInitialValue(webhookData) });
+
+	const {
+		reset,
+		handleSubmit,
+		formState: { isDirty },
+	} = methods;
+
+	const handleDeleteIntegration = useCallback(() => {
+		const onDelete = async () => {
+			if (!webhookData?._id) {
+				return;
+			}
+
+			deleteIntegration.mutate({ integrationId: webhookData._id, type: INCOMING_TYPE });
+		};
+
+		setModal(
+			<GenericModal variant='danger' onConfirm={onDelete} onCancel={() => setModal(null)} confirmText={t('Delete')}>
+				{t('Integration_Delete_Warning')}
+			</GenericModal>,
+		);
+	}, [webhookData?._id, deleteIntegration, setModal, t]);
+
+	const handleSave = useCallback(
+		async (formValues: EditIncomingWebhookFormData) => {
+			if (webhookData?._id) {
+				return updateIntegration.mutate({ integrationId: webhookData?._id, type: INCOMING_TYPE, ...formValues });
+			}
+
+			return createIntegration.mutate({ type: INCOMING_TYPE, ...formValues });
+		},
+		[webhookData?._id, updateIntegration, createIntegration],
+	);
+
+	const formId = useId();
+
+	return (
+		<Page flexDirection='column'>
+			<PageHeader title={t('Integration_Incoming_WebHook')} onClickBack={() => router.navigate('/admin/integrations/webhook-incoming')}>
+				<ButtonGroup>
+					{webhookData?._id && (
+						<Button danger onClick={handleDeleteIntegration}>
+							{t('Delete')}
+						</Button>
+					)}
+				</ButtonGroup>
+			</PageHeader>
+			{!webhookData?._id && (
+				<Tabs>
+					<TabsItem selected={tab === 'incoming'} onClick={() => router.navigate('/admin/integrations/new/incoming')}>
+						{t('Incoming')}
+					</TabsItem>
+					<TabsItem selected={tab === 'outgoing'} onClick={() => router.navigate('/admin/integrations/new/outgoing')}>
+						{t('Outgoing')}
+					</TabsItem>
+				</Tabs>
+			)}
+			<PageScrollableContentWithShadow id={formId} is='form' onSubmit={handleSubmit(handleSave)}>
+				<FormProvider {...methods}>
+					<IncomingWebhookForm webhookData={webhookData} />
+				</FormProvider>
+			</PageScrollableContentWithShadow>
+			<PageFooter isDirty={isDirty}>
+				<ButtonGroup>
+					<Button type='reset' onClick={() => reset()}>
+						{t('Cancel')}
+					</Button>
+					<Button form={formId} primary type='submit'>
+						{t('Save')}
+					</Button>
+				</ButtonGroup>
+			</PageFooter>
+		</Page>
+	);
+};
+
+export default EditIncomingWebhook;

apps/meteor/client/views/admin/integrations/incoming/IncomingWebhookForm.tsx

@@ -0,0 +1,343 @@
+import type { IIncomingIntegration, Serialized } from '@rocket.chat/core-typings';
+import type { SelectOption } from '@rocket.chat/fuselage';
+import {
+	FieldError,
+	IconButton,
+	Accordion,
+	AccordionItem,
+	Field,
+	TextInput,
+	Box,
+	ToggleSwitch,
+	Icon,
+	TextAreaInput,
+	FieldGroup,
+	Select,
+	FieldLabel,
+	FieldRow,
+	FieldHint,
+} from '@rocket.chat/fuselage';
+import { useAbsoluteUrl } from '@rocket.chat/ui-contexts';
+import DOMPurify from 'dompurify';
+import { useId, useMemo } from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
+import { Trans, useTranslation } from 'react-i18next';
+
+import type { EditIncomingWebhookFormData } from './EditIncomingWebhook';
+import useClipboardWithToast from '../../../../hooks/useClipboardWithToast';
+import { useHighlightedCode } from '../../../../hooks/useHighlightedCode';
+import { useExampleData } from '../hooks/useExampleIncomingData';
+
+export type IncomingWebhookFormProps = { webhookData?: Serialized<IIncomingIntegration> };
+
+const IncomingWebhookForm = ({ webhookData }: IncomingWebhookFormProps) => {
+	const { t } = useTranslation();
+	const absoluteUrl = useAbsoluteUrl();
+
+	const {
+		control,
+		watch,
+		formState: { errors },
+	} = useFormContext<EditIncomingWebhookFormData>();
+	const { alias, emoji, avatar } = watch();
+
+	const url = absoluteUrl(`hooks/${webhookData?._id}/${webhookData?.token}`);
+
+	const additionalFields = useMemo(
+		() => ({
+			...(alias && { alias }),
+			...(emoji && { emoji }),
+			...(avatar && { avatar }),
+		}),
+		[alias, avatar, emoji],
+	);
+
+	const [exampleData, curlData] = useExampleData({
+		additionalFields,
+		url,
+	});
+
+	const { copy: copyWebhookUrl } = useClipboardWithToast(url);
+	const { copy: copyToken } = useClipboardWithToast(`${webhookData?._id}/${webhookData?.token}`);
+	const { copy: copyCurlData } = useClipboardWithToast(curlData);
+
+	const scriptEngineOptions: SelectOption[] = useMemo(() => [['isolated-vm', t('Script_Engine_isolated_vm')]], [t]);
+
+	const hilightedExampleJson = useHighlightedCode('json', JSON.stringify(exampleData, null, 2));
+
+	const enabledField = useId();
+	const nameField = useId();
+	const channelField = useId();
+	const usernameField = useId();
+	const aliasField = useId();
+	const avatarField = useId();
+	const emojiField = useId();
+	const overrideDestinationChannelEnabledField = useId();
+	const scriptEnabledField = useId();
+	const scriptEngineField = useId();
+	const scriptField = useId();
+	const webhookUrlField = useId();
+	const tokenField = useId();
+	const curlField = useId();
+
+	return (
+		<Box maxWidth='x600' alignSelf='center' width='full'>
+			<Accordion>
+				<AccordionItem defaultExpanded={Boolean(webhookData?._id)} title={t('Instructions')}>
+					<FieldGroup>
+						<Field>
+							<FieldLabel htmlFor={webhookUrlField}>{t('Webhook_URL')}</FieldLabel>
+							<FieldRow>
+								<TextInput
+									id={webhookUrlField}
+									value={webhookData?._id ? url : t('Will_be_available_here_after_saving')}
+									readOnly
+									endAddon={
+										webhookData?._id ? <IconButton mini onClick={() => copyWebhookUrl()} title={t('Copy')} icon='copy' /> : undefined
+									}
+									aria-describedby={`${webhookUrlField}-hint`}
+								/>
+							</FieldRow>
+							<FieldHint id={`${webhookUrlField}-hint`}>{t('Send_your_JSON_payloads_to_this_URL')}</FieldHint>
+						</Field>
+						<Field>
+							<FieldLabel htmlFor={tokenField}>{t('Token')}</FieldLabel>
+							<FieldRow>
+								<TextInput
+									id={tokenField}
+									value={webhookData?._id ? `${webhookData?._id}/${webhookData?.token}` : t('Will_be_available_here_after_saving')}
+									readOnly
+									endAddon={webhookData?._id ? <IconButton mini onClick={() => copyToken()} title={t('Copy')} icon='copy' /> : undefined}
+								/>
+							</FieldRow>
+						</Field>
+						<Field>
+							<FieldLabel>{t('Example_payload')}</FieldLabel>
+							<FieldRow>
+								<Box fontScale='p2' withRichContent flexGrow={1}>
+									<pre>
+										<code dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(hilightedExampleJson) }}></code>
+									</pre>
+								</Box>
+							</FieldRow>
+						</Field>
+						{webhookData?._id && (
+							<Field>
+								<FieldLabel htmlFor={curlField}>Curl</FieldLabel>
+								<FieldRow>
+									<TextInput
+										id={curlField}
+										value={curlData}
+										readOnly
+										endAddon={
+											webhookData?._id ? <IconButton mini onClick={() => copyCurlData()} title={t('Copy')} icon='copy' /> : undefined
+										}
+									/>
+								</FieldRow>
+							</Field>
+						)}
+					</FieldGroup>
+				</AccordionItem>
+				<AccordionItem title={t('Settings')} defaultExpanded>
+					<FieldGroup>
+						<Field>
+							<FieldRow>
+								<FieldLabel htmlFor={enabledField}>{t('Enabled')}</FieldLabel>
+								<Controller
+									name='enabled'
+									control={control}
+									render={({ field: { value, ...field } }) => <ToggleSwitch id={enabledField} {...field} checked={value} />}
+								/>
+							</FieldRow>
+						</Field>
+						<Field>
+							<FieldLabel htmlFor={nameField}>{t('Name')}</FieldLabel>
+							<FieldRow>
+								<Controller
+									name='name'
+									control={control}
+									render={({ field }) => <TextInput id={nameField} {...field} aria-describedby={`${nameField}-hint`} />}
+								/>
+							</FieldRow>
+							<FieldHint id={`${nameField}-hint`}>{t('You_should_name_it_to_easily_manage_your_integrations')}</FieldHint>
+						</Field>
+						<Field>
+							<FieldLabel htmlFor={channelField} required>
+								{t('Post_to_Channel')}
+							</FieldLabel>
+							<FieldRow>
+								<Controller
+									name='channel'
+									control={control}
+									rules={{ required: t('Required_field', { field: t('Post_to_Channel') }) }}
+									render={({ field }) => (
+										<TextInput
+											id={channelField}
+											{...field}
+											endAddon={<Icon name='at' size='x20' />}
+											aria-describedby={`${channelField}-hint-1 ${channelField}-hint-2 ${channelField}-error`}
+											aria-required={true}
+											aria-invalid={Boolean(errors?.channel)}
+										/>
+									)}
+								/>
+							</FieldRow>
+							<FieldHint id={`${channelField}-hint-1`}>{t('Messages_that_are_sent_to_the_Incoming_WebHook_will_be_posted_here')}</FieldHint>
+							<FieldHint id={`${channelField}-hint-2`}>
+								<Trans i18nKey='Start_with_s_for_user_or_s_for_channel_Eg_s_or_s' components={{ code: <code className='inline' /> }} />
+							</FieldHint>
+							{errors?.channel && (
+								<FieldError aria-live='assertive' id={`${channelField}-error`}>
+									{errors?.channel.message}
+								</FieldError>
+							)}
+						</Field>
+						<Field>
+							<FieldLabel htmlFor={usernameField} required>
+								{t('Post_as')}
+							</FieldLabel>
+							<FieldRow>
+								<Controller
+									name='username'
+									control={control}
+									rules={{ required: t('Required_field', { field: t('Post_as') }) }}
+									render={({ field }) => (
+										<TextInput
+											id={usernameField}
+											{...field}
+											endAddon={<Icon name='user' size='x20' />}
+											aria-describedby={`${usernameField}-hint-1 ${usernameField}-hint-2 ${usernameField}-error`}
+											aria-required={true}
+											aria-invalid={Boolean(errors?.username)}
+										/>
+									)}
+								/>
+							</FieldRow>
+							<FieldHint id={`${usernameField}-hint-1`}>{t('Choose_the_username_that_this_integration_will_post_as')}</FieldHint>
+							<FieldHint id={`${usernameField}-hint-2`}>
+								{t('User_must_exist_and_have_permission', { permission: 'message-impersonate' })}
+							</FieldHint>
+							{errors?.username && (
+								<FieldError aria-live='assertive' id={`${usernameField}-error`}>
+									{errors.username.message}
+								</FieldError>
+							)}
+						</Field>
+						<Field>
+							<FieldLabel htmlFor={aliasField}>{t('Alias')}</FieldLabel>
+							<FieldRow>
+								<Controller
+									name='alias'
+									control={control}
+									render={({ field }) => (
+										<TextInput
+											id={aliasField}
+											{...field}
+											aria-describedby={`${aliasField}-hint`}
+											endAddon={<Icon name='edit' size='x20' />}
+										/>
+									)}
+								/>
+							</FieldRow>
+							<FieldHint id={`${aliasField}-hint`}>{t('Choose_the_alias_that_will_appear_before_the_username_in_messages')}</FieldHint>
+						</Field>
+						<Field>
+							<FieldLabel htmlFor={avatarField}>{t('Avatar_URL')}</FieldLabel>
+							<FieldRow>
+								<Controller
+									name='avatar'
+									control={control}
+									render={({ field }) => (
+										<TextInput
+											id={avatarField}
+											{...field}
+											aria-describedby={`${avatarField}-hint-1 ${avatarField}-hint-2`}
+											endAddon={<Icon name='user-rounded' size='x20' alignSelf='center' />}
+										/>
+									)}
+								/>
+							</FieldRow>
+							<FieldHint id={`${avatarField}-hint-1`}>{t('You_can_change_a_different_avatar_too')}</FieldHint>
+							<FieldHint id={`${avatarField}-hint-2`}>{t('Should_be_a_URL_of_an_image')}</FieldHint>
+						</Field>
+						<Field>
+							<FieldLabel htmlFor={emojiField}>{t('Emoji')}</FieldLabel>
+							<FieldRow>
+								<Controller
+									name='emoji'
+									control={control}
+									render={({ field }) => (
+										<TextInput
+											id={emojiField}
+											{...field}
+											aria-describedby={`${emojiField}-hint-1 ${emojiField}-hint-2`}
+											endAddon={<Icon name='emoji' size='x20' alignSelf='center' />}
+										/>
+									)}
+								/>
+							</FieldRow>
+							<FieldHint id={`${emojiField}-hint-1`}>{t('You_can_use_an_emoji_as_avatar')}</FieldHint>
+							<FieldHint id={`${emojiField}-hint-2`}>
+								<Trans i18nKey='Example_s' values={{ value: ':ghost:' }} components={{ code: <code className='inline' /> }} />
+							</FieldHint>
+						</Field>
+						<Field>
+							<FieldRow>
+								<FieldLabel htmlFor={overrideDestinationChannelEnabledField}>{t('Override_Destination_Channel')}</FieldLabel>
+								<Controller
+									name='overrideDestinationChannelEnabled'
+									control={control}
+									render={({ field: { value, ...field } }) => (
+										<ToggleSwitch id={overrideDestinationChannelEnabledField} {...field} checked={value} />
+									)}
+								/>
+							</FieldRow>
+						</Field>
+						<Field>
+							<FieldRow>
+								<FieldLabel htmlFor={scriptEnabledField}>{t('Script_Enabled')}</FieldLabel>
+								<Controller
+									name='scriptEnabled'
+									control={control}
+									render={({ field: { value, ...field } }) => <ToggleSwitch id={scriptEnabledField} {...field} checked={value} />}
+								/>
+							</FieldRow>
+						</Field>
+						<Field>
+							<FieldLabel htmlFor={scriptEngineField}>{t('Script_Engine')}</FieldLabel>
+							<FieldRow>
+								<Controller
+									name='scriptEngine'
+									control={control}
+									render={({ field }) => (
+										<Select
+											id={scriptEngineField}
+											aria-describedby={`${scriptEngineField}-hint`}
+											{...field}
+											options={scriptEngineOptions}
+										/>
+									)}
+								/>
+							</FieldRow>
+							<FieldHint id={`${scriptEngineField}-hint`}>{t('Script_Engine_Description')}</FieldHint>
+						</Field>
+						<Field>
+							<FieldLabel htmlFor={scriptField}>{t('Script')}</FieldLabel>
+							<FieldRow>
+								<Controller
+									name='script'
+									control={control}
+									render={({ field }) => (
+										<TextAreaInput id={scriptField} {...field} rows={10} endAddon={<Icon name='code' size='x20' alignSelf='center' />} />
+									)}
+								/>
+							</FieldRow>
+						</Field>
+					</FieldGroup>
+				</AccordionItem>
+			</Accordion>
+		</Box>
+	);
+};
+
+export default IncomingWebhookForm;