fix: allow broken variables when validate updates (#4892)

Some templates have variables with missing scopeInstanceId on dialogs or
something else from broken embed template. Here allow it in validation
because migration would be more complex.

---------

Co-authored-by: Oleg Isonen <[email protected]>

Author: TrySound

apps/builder/app/shared/data-variables.ts

@@ -312,7 +312,7 @@ const traverseExpressions = ({
 
   for (const dataSource of dataSources.values()) {
     if (
-      instanceIds.has(dataSource.scopeInstanceId) &&
+      instanceIds.has(dataSource.scopeInstanceId ?? "") &&
       dataSource.type === "resource"
     ) {
       resourceIds.add(dataSource.resourceId);
@@ -440,15 +440,16 @@ export const deleteVariableMutable = (
   }
   const unsetNameById = new Map<DataSource["id"], DataSource["name"]>();
   unsetNameById.set(dataSource.id, dataSource.name);
+  const startingInstanceId = dataSource.scopeInstanceId ?? "";
   const maskedIdByName = findMaskedVariablesByInstanceId({
-    startingInstanceId: dataSource.scopeInstanceId,
+    startingInstanceId,
     instances: data.instances,
     dataSources: data.dataSources,
   });
   // unset deleted variable in expressions
   traverseExpressions({
     ...data,
-    startingInstanceId: dataSource.scopeInstanceId,
+    startingInstanceId,
     update: (expression) => {
       expression = unsetExpressionVariables({
         expression,

apps/builder/app/shared/instance-utils.ts

@@ -465,7 +465,7 @@ export const deleteInstanceMutable = (
     }
   }
   for (const dataSource of dataSources.values()) {
-    if (instanceIds.has(dataSource.scopeInstanceId)) {
+    if (instanceIds.has(dataSource.scopeInstanceId ?? "")) {
       dataSources.delete(dataSource.id);
       if (dataSource.type === "resource") {
         resources.delete(dataSource.resourceId);
@@ -605,7 +605,7 @@ export const extractWebstudioFragment = (
   const fragmentResourceIds = new Set<Resource["id"]>();
   const unsetNameById = new Map<DataSource["id"], DataSource["name"]>();
   for (const dataSource of dataSources.values()) {
-    if (fragmentInstanceIds.has(dataSource.scopeInstanceId)) {
+    if (fragmentInstanceIds.has(dataSource.scopeInstanceId ?? "")) {
       fragmentDataSources.set(dataSource.id, dataSource);
       if (dataSource.type === "resource") {
         fragmentResourceIds.add(dataSource.resourceId);
@@ -866,7 +866,7 @@ export const insertWebstudioFragmentCopy = ({
     const usedResourceIds = new Set<Resource["id"]>();
     for (const dataSource of fragment.dataSources) {
       // insert only data sources within portal content
-      if (instanceIds.has(dataSource.scopeInstanceId)) {
+      if (instanceIds.has(dataSource.scopeInstanceId ?? "")) {
         dataSources.set(dataSource.id, dataSource);
         if (dataSource.type === "resource") {
           usedResourceIds.add(dataSource.resourceId);
@@ -956,7 +956,7 @@ export const insertWebstudioFragmentCopy = ({
   }
   const newResourceIds = new Map<Resource["id"], Resource["id"]>();
   for (let dataSource of fragment.dataSources) {
-    const { scopeInstanceId } = dataSource;
+    const scopeInstanceId = dataSource.scopeInstanceId ?? "";
     if (scopeInstanceId === ROOT_INSTANCE_ID) {
       // add global variable only if not exist already
       if (

packages/sdk/src/schema/data-sources.ts

@@ -30,20 +30,25 @@ export const DataSource = z.union([
   z.object({
     type: z.literal("variable"),
     id: DataSourceId,
-    scopeInstanceId: z.string(),
+    // The instance should always be specified for variables,
+    // however, there was a bug in the embed template
+    // which produced variables without an instance
+    // and these variables will fail validation
+    // if we make it required
+    scopeInstanceId: z.string().optional(),
     name: z.string(),
     value: DataSourceVariableValue,
   }),
   z.object({
     type: z.literal("parameter"),
     id: DataSourceId,
-    scopeInstanceId: z.string(),
+    scopeInstanceId: z.string().optional(),
     name: z.string(),
   }),
   z.object({
     type: z.literal("resource"),
     id: DataSourceId,
-    scopeInstanceId: z.string(),
+    scopeInstanceId: z.string().optional(),
     name: z.string(),
     resourceId: z.string(),
   }),