feat: Add custom CSS to response form for HITL nodes (#15807)

Co-authored-by: RomanDavydchuk <[email protected]>

Author: elsmr

packages/nodes-base/utils/sendAndWait/test/util.test.ts

@@ -303,6 +303,7 @@ describe('Send and Wait utils tests', () => {
 						responseFormTitle: 'Test title',
 						responseFormDescription: 'Test description',
 						responseFormButtonLabel: 'Test button',
+						responseFormCustomCss: 'body { background-color: red; }',
 					},
 				};
 				return params[parameterName];
@@ -334,6 +335,7 @@ describe('Send and Wait utils tests', () => {
 				],
 				appendAttribution: true,
 				buttonLabel: 'Test button',
+				dangerousCustomCss: 'body { background-color: red; }',
 			});
 		});
 

packages/nodes-base/utils/sendAndWait/utils.ts

@@ -22,6 +22,7 @@ import {
 	createEmailBodyWithoutN8nAttribution,
 } from './email-templates';
 import type { IEmail } from './interfaces';
+import { cssVariables } from '../../nodes/Form/cssVariables';
 import { formFieldsProperties } from '../../nodes/Form/Form.node';
 import { prepareFormData, prepareFormReturnItem, resolveRawData } from '../../nodes/Form/utils';
 import { escapeHtml } from '../utilities';
@@ -39,6 +40,7 @@ type FormResponseTypeOptions = {
 	responseFormTitle?: string;
 	responseFormDescription?: string;
 	responseFormButtonLabel?: string;
+	responseFormCustomCss?: string;
 };
 
 const INPUT_FIELD_IDENTIFIER = 'field-0';
@@ -283,6 +285,17 @@ export function getSendAndWaitProperties(
 					type: 'string',
 					default: 'Submit',
 				},
+				{
+					displayName: 'Response Form Custom Styling',
+					name: 'responseFormCustomCss',
+					type: 'string',
+					typeOptions: {
+						rows: 10,
+						editor: 'cssEditor',
+					},
+					default: cssVariables.trim(),
+					description: 'Override default styling of the response form with CSS',
+				},
 				limitWaitTimeOption,
 				appendAttributionOption,
 			],
@@ -331,6 +344,7 @@ const getFormResponseCustomizations = (context: IWebhookFunctions) => {
 		formTitle,
 		formDescription,
 		buttonLabel,
+		customCss: options.responseFormCustomCss,
 	};
 };
 
@@ -351,7 +365,8 @@ export async function sendAndWaitWebhook(this: IWebhookFunctions) {
 
 	if (responseType === 'freeText') {
 		if (method === 'GET') {
-			const { formTitle, formDescription, buttonLabel } = getFormResponseCustomizations(this);
+			const { formTitle, formDescription, buttonLabel, customCss } =
+				getFormResponseCustomizations(this);
 
 			const data = prepareFormData({
 				formTitle,
@@ -369,6 +384,7 @@ export async function sendAndWaitWebhook(this: IWebhookFunctions) {
 				],
 				testRun: false,
 				query: {},
+				customCss,
 			});
 
 			res.render('form-trigger', data);
@@ -408,7 +424,8 @@ export async function sendAndWaitWebhook(this: IWebhookFunctions) {
 		}
 
 		if (method === 'GET') {
-			const { formTitle, formDescription, buttonLabel } = getFormResponseCustomizations(this);
+			const { formTitle, formDescription, buttonLabel, customCss } =
+				getFormResponseCustomizations(this);
 
 			const data = prepareFormData({
 				formTitle,
@@ -420,6 +437,7 @@ export async function sendAndWaitWebhook(this: IWebhookFunctions) {
 				formFields: fields,
 				testRun: false,
 				query: {},
+				customCss,
 			});
 
 			res.render('form-trigger', data);