Fix component validation

src/api/dto/CalloutDto.ts

@@ -1,4 +1,4 @@
-import { CalloutFormSchema, ItemStatus } from "@beabee/beabee-common";
+import { ItemStatus } from "@beabee/beabee-common";
 import { Type } from "class-transformer";
 import {
   Equals,
@@ -8,7 +8,6 @@ import {
   IsEnum,
   IsIn,
   IsNumber,
-  IsObject,
   IsOptional,
   IsString,
   Max,
@@ -17,6 +16,7 @@ import {
 } from "class-validator";
 
 import { GetExportQuery, GetPaginatedQuery } from "@api/dto/BaseDto";
+import { CalloutFormDto } from "@api/dto/CalloutFormDto";
 import { LinkDto } from "@api/dto/LinkDto";
 import IsSlug from "@api/validators/IsSlug";
 import IsUrl from "@api/validators/IsUrl";
@@ -28,7 +28,6 @@ import { CalloutMapSchema, CalloutResponseViewSchema } from "@models/Callout";
 import { CalloutAccess } from "@enums/callout-access";
 
 import { CalloutData } from "@type/callout-data";
-import { CalloutFormDto } from "./CalloutFormDto";
 
 export enum GetCalloutWith {
   Form = "form",
@@ -189,6 +188,7 @@ export class CreateCalloutDto extends BaseCalloutDto {
   thanksText!: string;
 
   @ValidateNested()
+  @Type(() => CalloutFormDto)
   formSchema!: CalloutFormDto;
 }
 
@@ -218,5 +218,6 @@ export class GetCalloutDto extends BaseCalloutDto {
 
   @IsOptional()
   @ValidateNested()
+  @Type(() => CalloutFormDto)
   formSchema?: CalloutFormDto;
 }

src/api/dto/CalloutFormDto.ts

@@ -15,7 +15,11 @@ import {
   IsIn,
   IsOptional,
   IsString,
-  ValidateNested
+  ValidateBy,
+  ValidateNested,
+  ValidationOptions,
+  buildMessage,
+  validate
 } from "class-validator";
 
 const inputTypes = [
@@ -37,7 +41,6 @@ abstract class BaseCalloutComponentDto implements BaseCalloutComponentSchema {
   abstract type: string;
   abstract input?: boolean;
 
-  // TODO
   [key: string]: unknown;
 
   @IsString()
@@ -143,10 +146,38 @@ function ComponentType() {
           name: type
         }))
       ]
-    }
+    },
+    keepDiscriminatorProperty: true
   });
 }
 
+// This is hack to disable whitelist validation for components because
+// the schema for a component has loads of properties and it would take
+// a long time to list them all.
+// TODO: validate properly!
+function IsComponent(validationOptions?: ValidationOptions) {
+  return ValidateBy(
+    {
+      name: "isComponent",
+      validator: {
+        async validate(value: unknown) {
+          if (typeof value !== "object" || value === null) return false;
+          const error = await validate(value, {
+            whitelist: false,
+            forbidUnknownValues: true
+          });
+          return error.length === 0;
+        },
+        defaultMessage: buildMessage(
+          (eachPrefix) => eachPrefix + "$property must be a valid component",
+          validationOptions
+        )
+      }
+    },
+    validationOptions
+  );
+}
+
 type CalloutComponentDto =
   | NestableCalloutComponentDto
   | InputCalloutComponentDto
@@ -163,7 +194,7 @@ class NestableCalloutComponentDto
   @Equals(false)
   input!: false;
 
-  @ValidateNested({ each: true })
+  @IsComponent({ each: true })
   @ComponentType()
   components!: CalloutComponentDto[];
 }
@@ -189,7 +220,7 @@ class CalloutSlideDto implements CalloutSlideSchema {
   @IsString()
   title!: string;
 
-  @ValidateNested({ each: true })
+  @IsComponent({ each: true })
   @ComponentType()
   components!: CalloutComponentDto[];
 

src/api/interceptors/ValidateResponseInterceptor.ts

@@ -36,7 +36,7 @@ export class ValidateResponseInterceptor implements InterceptorInterface {
         whitelist: true,
         forbidUnknownValues: true,
         forbidNonWhitelisted: true,
-        stopAtFirstError: true
+        validationError: { target: false }
       });
       if (errors.length > 0) {
         log.error("Validation failed on response", { errors });