fix[ENG-8003]: Changing the entry on a symbol does not update the preview window

packages/sdks-tests/src/e2e-tests/editing.spec.ts

@@ -1,4 +1,4 @@
 import { expect } from '@playwright/test';
 import {
   COLUMNS_WITH_NEW_SPACE,
   COLUMNS_WITH_NEW_TEXT,
@@ -20,7 +20,11 @@
 import { ACCORDION_WITH_NO_DETAIL } from '../specs/accordion.js';
 import { NEW_BLOCK_ADD, NEW_BLOCK_ADD_2 } from '../specs/new-block-add.js';
 import { SECTION_CHILDREN } from '../specs/section-children.js';
-
+import {
+  GET_CONTENT_SYMBOL_UPDATE_ENTRY_ONE,
+  GET_CONTENT_SYMBOL_UPDATE_ENTRY__TWO,
+  MAIN_CONTENT
+} from '../specs/get-content-symbol-update-entry.js';
 const editorTests = ({
   noTrustedHosts,
   editorIsInViewPort,
@@ -825,3 +829,45 @@
     });
   });
 });
+
+test('Symbol should update the data when nested values are updated', async ({
+  page,
+  sdk,
+  packageName,
+  basePort
+}) => {
+  test.skip(excludeGen1(sdk));
+  test.skip(packageName === 'nextjs-sdk-next-app');
+
+  let fetchCount = 0;
+  const symbolRequests: URL[] = [];
+  const urlMatch = /https:\/\/cdn\.builder\.io\/api\/v3\/content\/symbol/;
+
+  await page.route(urlMatch, route => {
+    fetchCount++;
+    const url = new URL(route.request().url());
+    symbolRequests.push(url);
+    return route.fulfill({
+      status: 200,
+      json: {
+        results: [
+          fetchCount === 1
+            ? GET_CONTENT_SYMBOL_UPDATE_ENTRY_ONE
+            : GET_CONTENT_SYMBOL_UPDATE_ENTRY__TWO,
+        ],
+      },
+    });
+  });
+
+  await launchEmbedderAndWaitForSdk({ path: '/symbol-update-entries', basePort, page, sdk });
+
+  const newContent = cloneContent(MAIN_CONTENT);
+
+  await page.frameLocator('iframe').getByText('Green Potato').waitFor();
+
+  newContent.data.blocks[0].component.options.symbol.entry = 'aa024e6851e94b49b99f41a2294fd423';
+  await sendContentUpdateMessage({ page, newContent, model: 'page' });
+
+  await page.frameLocator('iframe').getByText('Red tomato').waitFor();
+  expect(fetchCount).toBe(2);
+});

packages/sdks-tests/src/specs/get-content-symbol-update-entry.ts

@@ -0,0 +1,85 @@
+
+export const GET_CONTENT_SYMBOL_UPDATE_ENTRY_ONE = {
+  data: {
+    blocks: [
+      {
+        '@type': '@builder.io/sdk:Element',
+        '@version': 2,
+        id: 'builder-d3b5d8a50eff41e7a24cce1b82abd8fe',
+        component: { name: 'Text', options: { text: 'Green Potato' } },
+        responsiveStyles: {
+          large: {
+            display: 'flex',
+            flexDirection: 'column',
+            position: 'relative',
+            flexShrink: '0',
+            boxSizing: 'border-box',
+            marginTop: '20px',
+            lineHeight: 'normal',
+            height: 'auto',
+          },
+        },
+      },
+    ],
+  }
+}
+
+
+export const MAIN_CONTENT = {
+  data: {
+    inputs: [],
+    themeId: false,
+    title: 'symbol with locale',
+    blocks: [
+      {
+        '@type': '@builder.io/sdk:Element',
+        '@version': 2,
+        id: 'builder-29bab71fac7043eb921eb530a3203e5f',
+        component: {
+          name: 'Symbol',
+          options: {
+            symbol: {
+              entry: 'e2a166f7d9544ed9ade283abf9491af3',
+              model: 'symbol',
+              data: {},
+            },
+          },
+        },
+        responsiveStyles: {
+          large: {
+            display: 'flex',
+            flexDirection: 'column',
+            position: 'relative',
+            flexShrink: '0',
+            boxSizing: 'border-box',
+          },
+        },
+      },
+    ],
+  },
+};
+
+export const GET_CONTENT_SYMBOL_UPDATE_ENTRY__TWO = {
+  data: {
+    blocks: [
+      {
+        '@type': '@builder.io/sdk:Element',
+        '@version': 2,
+        id: 'builder-fb1550e198b84b6089fdc977a393f208',
+        component: { name: 'Text', options: { text: 'Red tomato' } },
+        responsiveStyles: {
+          large: {
+            display: 'flex',
+            flexDirection: 'column',
+            position: 'relative',
+            flexShrink: '0',
+            boxSizing: 'border-box',
+            marginTop: '20px',
+            lineHeight: 'normal',
+            height: 'auto',
+          },
+        },
+      },
+    ],
+  }
+}

packages/sdks-tests/src/specs/index.ts

@@ -91,6 +91,7 @@ import { NEW_BLOCK_ADD } from './new-block-add.js';
 import { DYNAMIC_BUTTON } from './dynamic-button.js';
 import { COLUMNS_VERTICAL_CENTERING } from './columns-vertical-centering.js';
 import { SECTION_CHILDREN } from './section-children.js';
+import { MAIN_CONTENT } from './get-content-symbol-update-entry.js';
 
 function isBrowser(): boolean {
   return typeof window !== 'undefined' && typeof document !== 'undefined';
@@ -287,6 +288,7 @@ export const PAGES: Record<string, Page> = {
   '/dynamic-button': { content: DYNAMIC_BUTTON },
   '/columns-vertical-centering': { content: COLUMNS_VERTICAL_CENTERING },
   '/section-children': { content: SECTION_CHILDREN },
+  '/symbol-update-entries': { content: MAIN_CONTENT },
 } as const;
 
 export type Path = keyof typeof PAGES;

packages/sdks/src/blocks/symbol/symbol.lite.tsx

@@ -70,15 +70,17 @@ export default function Symbol(props: SymbolProps) {
           builderContextValue: props.builderContext.value,
         }))) as Nullable<BuilderContent>,
     }),
+    symbolEntry: props.symbol?.entry,
     setContent() {
-      if (state.contentToUse) return;
+      if (state.contentToUse && state.symbolEntry === props.symbol?.entry) return;
 
       fetchSymbolContent({
         symbol: props.symbol,
         builderContextValue: props.builderContext.value,
       }).then((newContent) => {
         if (newContent) {
           state.contentToUse = newContent;
+          state.symbolEntry = props.symbol?.entry;
         }
       });
     },