feat: validate optionactions structure page-4876 (#482)

* fix: validate optionActions * fix: enable procoder to conditionally trigger add child based on where its dropped in * fix: change optionActions schema to a more refined setup * test: make tests pass --------- Co-authored-by: michel <[email protected]>
bettyblocks · Dec 31, 2024 · 97b1610 · 97b1610
1 parent 7561706
commit 97b1610
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 21 deletions.
diff --git a/__tests__/validations/component.test.tsx b/__tests__/validations/component.test.tsx
@@ -817,7 +817,7 @@ test('Does not throw when valid partial Prefab', (t: Context): void => {
     },
   ];
 
-  validatePrefabs(prefabs, {}, {}, 'partial');
+  validatePrefabs(prefabs, {}, {}, [], 'partial');
   t.pass();
 });
 
@@ -836,7 +836,7 @@ test('Throw when partialcomponent in partial Prefab', (t: Context): void => {
     },
   ];
 
-  t.throws(() => validatePrefabs(prefabs, {}, {}, 'partial'));
+  t.throws(() => validatePrefabs(prefabs, {}, {}, [], 'partial'));
 });
 
 test('Throw when type key in partial Prefab', (t: Context): void => {
@@ -862,7 +862,7 @@ test('Throw when type key in partial Prefab', (t: Context): void => {
       ],
     },
   ];
-  t.throws(() => validatePrefabs(prefabs, {}, {}, 'partial'));
+  t.throws(() => validatePrefabs(prefabs, {}, {}, [], 'partial'));
 });
 
 test("throws an error when a reserved keyword is used 'PARTIAL'", (t: Context): void => {

diff --git a/src/bb-components-build.ts b/src/bb-components-build.ts
@@ -19,7 +19,6 @@ import {
   Component,
   Interaction,
   Prefab,
-  ComponentStyleMap,
   PrefabReference,
   GroupedStyles,
   BuildPrefabReference,
@@ -440,20 +439,43 @@ void (async (): Promise<void> => {
 
     checkNameReferences(prefabs, finalComponents);
 
-    const componentStyleMap: ComponentStyleMap = components.reduce((acc, c) => {
-      return c.styleType
-        ? Object.assign(acc, { [c.name]: { styleType: c.styleType } })
-        : acc;
-    }, {});
+    const {
+      availableNames: availableComponentNames,
+      styleMap: componentStyleMap,
+    } = components.reduce<{
+      availableNames: string[];
+      styleMap: Record<string, { styleType: string }>;
+    }>(
+      ({ availableNames, styleMap }, component) => {
+        const newNames = availableNames.includes(component.name)
+          ? availableNames
+          : [...availableNames, component.name];
+
+        const newStyleMap = component.styleType
+          ? Object.assign(styleMap, {
+              [component.name]: { styleType: component.styleType },
+            })
+          : styleMap;
+
+        return { availableNames: newNames, styleMap: newStyleMap };
+      },
+      { availableNames: [], styleMap: {} },
+    );
 
     await Promise.all([
       validateStyles(styles, componentNames),
       validateComponents(components, validStyleTypes),
-      validatePrefabs(prefabs, stylesGroupedByTypeAndName, componentStyleMap),
+      validatePrefabs(
+        prefabs,
+        stylesGroupedByTypeAndName,
+        componentStyleMap,
+        availableComponentNames,
+      ),
       validatePrefabs(
         allPartialPrefabs,
         stylesGroupedByTypeAndName,
         componentStyleMap,
+        availableComponentNames,
         'partial',
       ),
       interactions && validateInteractions(interactions),

diff --git a/src/validations/prefab.ts b/src/validations/prefab.ts
@@ -20,6 +20,7 @@ export type PrefabTypes = 'partial' | 'page' | undefined;
 const schemaProvider = (
   styles: GroupedStyles,
   componentStyleMap?: ComponentStyleMap,
+  availableComponentNames?: string[],
   prefabType?: PrefabTypes,
 ): Joi.ObjectSchema => {
   return Joi.object({
@@ -43,7 +44,14 @@ const schemaProvider = (
     beforeCreate: Joi.any(),
     structure: Joi.array()
       .items(
-        Joi.custom(validateComponent(styles, componentStyleMap, prefabType)),
+        Joi.custom(
+          validateComponent(
+            styles,
+            componentStyleMap,
+            availableComponentNames,
+            prefabType,
+          ),
+        ),
       )
       .required(),
     reconfigure: Joi.any(),
@@ -54,13 +62,15 @@ const validate =
   (
     styles: GroupedStyles,
     componentStyleMap?: ComponentStyleMap,
+    availableComponentNames?: string[],
     prefabType?: PrefabTypes,
   ) =>
   (prefab: Prefab): void => {
     const { actions, variables } = prefab;
     const { error } = schemaProvider(
       styles,
       componentStyleMap,
+      availableComponentNames,
       prefabType,
     ).validate(prefab);
 
@@ -84,9 +94,12 @@ export default (
   prefabs: Prefab[],
   styles: GroupedStyles,
   componentStyleMap?: ComponentStyleMap,
+  availableComponentNames?: string[],
   prefabType?: PrefabTypes,
 ): void => {
-  prefabs.forEach(validate(styles, componentStyleMap, prefabType));
+  prefabs.forEach(
+    validate(styles, componentStyleMap, availableComponentNames, prefabType),
+  );
 
   findDuplicates(prefabs, 'prefab', 'name');
 };
diff --git a/src/validations/prefab/component.ts b/src/validations/prefab/component.ts
@@ -106,6 +106,7 @@ const partialSchema = (): Joi.ObjectSchema => {
 const wrapperSchema = (
   styles: GroupedStyles,
   componentStyleMap?: ComponentStyleMap,
+  availableComponentNames?: string[],
   prefabType?: PrefabTypes,
 ): Joi.ObjectSchema => {
   return Joi.object({
@@ -117,7 +118,14 @@ const wrapperSchema = (
       .required(),
     descendants: Joi.array()
       .items(
-        Joi.custom(validateComponent(styles, componentStyleMap, prefabType)),
+        Joi.custom(
+          validateComponent(
+            styles,
+            componentStyleMap,
+            availableComponentNames,
+            prefabType,
+          ),
+        ),
       )
       .required(),
   });
@@ -189,9 +197,45 @@ const validateComponentStyle =
     return prefabObject;
   };
 
+const allowedChangeActions = ['setVariable', 'setModel'];
+
+const onChangeAction = Joi.object({
+  action: Joi.string()
+    .valid(...allowedChangeActions)
+    .messages({
+      valid: `onChangeAction not of value: ${JSON.stringify(
+        allowedChangeActions,
+      )}`,
+    }),
+  format: Joi.string().when('action', {
+    is: 'setVariable',
+    then: Joi.valid('propertyLabel', 'propertyValue', 'static'),
+    otherwise: Joi.forbidden(),
+  }),
+  target: Joi.string(),
+});
+
+const optionActionsObject = Joi.object({
+  onChange: Joi.array().items(onChangeAction),
+});
+
+const optionTemplatesSchema = (availableComponentNames?: string[]) =>
+  Joi.object({
+    addChild: Joi.object({
+      condition: Joi.object({
+        onlyShowWhenDroppedIn: Joi.string().valid(
+          ...(availableComponentNames || []),
+        ),
+      }),
+      options: Joi.array().items(optionSchema).required(),
+      optionActions: Joi.object().pattern(Joi.string(), optionActionsObject),
+    }),
+  });
+
 const componentSchema = (
   styles: GroupedStyles,
   componentStyleMap?: ComponentStyleMap,
+  availableComponentNames?: string[],
   styleType?: keyof StyleValidator,
   prefabType?: PrefabTypes,
 ): Joi.ObjectSchema => {
@@ -206,12 +250,6 @@ const componentSchema = (
     overwrite: overwriteSchema,
   });
 
-  const optionTemplatesSchema = Joi.object({
-    addChild: Joi.object({
-      options: Joi.array().items(optionSchema).required(),
-    }),
-  });
-
   const deprecatedStylesFlag = Object.keys(styles).length === 0;
 
   return Joi.object({
@@ -223,11 +261,18 @@ const componentSchema = (
     }),
     optionCategories: Joi.array().items(optionCategorySchema).min(1),
     options: Joi.array().items(optionSchema).required(),
-    optionTemplates: optionTemplatesSchema,
+    optionTemplates: optionTemplatesSchema(availableComponentNames),
     type: Joi.string().valid('COMPONENT').default('COMPONENT'),
     descendants: Joi.array()
       .items(
-        Joi.custom(validateComponent(styles, componentStyleMap, prefabType)),
+        Joi.custom(
+          validateComponent(
+            styles,
+            componentStyleMap,
+            availableComponentNames,
+            prefabType,
+          ),
+        ),
       )
       .required(),
     reconfigure: Joi.any(),
@@ -306,6 +351,7 @@ export const validateComponent =
   (
     styles: GroupedStyles,
     componentStyleMap?: ComponentStyleMap,
+    availableComponentNames?: string[],
     prefabType?: PrefabTypes,
   ) =>
   (component: PrefabReference): Prefab | unknown => {
@@ -329,6 +375,7 @@ export const validateComponent =
       const { error } = wrapperSchema(
         styles,
         componentStyleMap,
+        availableComponentNames,
         prefabType,
       ).validate(component);
       const { optionCategories = [], options } = component;
@@ -354,6 +401,7 @@ export const validateComponent =
       const { error } = componentSchema(
         styles,
         componentStyleMap,
+        availableComponentNames,
         styleType as keyof StyleValidator,
         prefabType,
       ).validate(component);