Enable component nesting validation for new apps

packages/builder/src/builderStore/store/frontend.js

@@ -61,6 +61,9 @@ const INITIAL_FRONTEND_STATE = {
     showNotificationAction: false,
     sidePanel: false,
   },
+  features: {
+    componentValidation: false,
+  },
   errors: [],
   hasAppPackage: false,
   libraries: null,
@@ -145,6 +148,10 @@ export const getFrontendStore = () => {
         navigation: application.navigation || {},
         usedPlugins: application.usedPlugins || [],
         hasLock,
+        features: {
+          ...INITIAL_FRONTEND_STATE.features,
+          ...application.features,
+        },
         initialised: true,
       }))
       screenHistoryStore.reset()
@@ -280,9 +287,12 @@ export const getFrontendStore = () => {
         }
       },
       save: async screen => {
-        // Validate screen structure
-        // Temporarily disabled to accommodate migration issues
-        // store.actions.screens.validate(screen)
+        const state = get(store)
+
+        // Validate screen structure if the app supports it
+        if (state.features?.componentValidation) {
+          store.actions.screens.validate(screen)
+        }
 
         // Check screen definition for any component settings which need updated
         store.actions.screens.enrichEmptySettings(screen)
@@ -293,7 +303,6 @@ export const getFrontendStore = () => {
         const routesResponse = await API.fetchAppRoutes()
 
         // If plugins changed we need to fetch the latest app metadata
-        const state = get(store)
         let usedPlugins = state.usedPlugins
         if (savedScreen.pluginAdded) {
           const { application } = await API.fetchAppPackage(state.appId)

packages/client/manifest.json

@@ -2216,7 +2216,7 @@
     "name": "Form",
     "icon": "Form",
     "hasChildren": true,
-    "illegalChildren": ["section", "form"],
+    "illegalChildren": ["section", "form", "formblock"],
     "actions": [
       "ValidateForm",
       "ClearForm",
@@ -2304,7 +2304,7 @@
     "name": "Form Step",
     "icon": "AssetsAdded",
     "hasChildren": true,
-    "illegalChildren": ["section", "form", "form step"],
+    "illegalChildren": ["section", "form", "formstep", "formblock"],
     "styles": ["size"],
     "size": {
       "width": 400,

packages/server/src/api/controllers/application.ts

@@ -308,6 +308,9 @@ async function performAppCreate(ctx: UserCtx) {
       customTheme: {
         buttonBorderRadius: "16px",
       },
+      features: {
+        componentValidation: true,
+      },
     }
 
     // If we used a template or imported an app there will be an existing doc.

packages/types/src/documents/app/app.ts

@@ -20,6 +20,7 @@ export interface App extends Document {
   navigation?: AppNavigation
   automationErrors?: AppMetadataErrors
   icon?: AppIcon
+  features?: AppFeatures
 }
 
 export interface AppInstance {
@@ -60,3 +61,7 @@ export interface AppIcon {
   name: string
   color: string
 }
+
+export interface AppFeatures {
+  componentValidation?: boolean
+}