chore[gen-1]: ENG-8050 send modal-name and api-key from sdk (BuilderIO#3877)

## Description

Sending "modalName" and "apiKey" from sdk. 
These data are added to the event "builder.sdkInjected".

---------

Co-authored-by: Shubham <[email protected]>
Co-authored-by: Sami Jaber <[email protected]>

Author: 3 people

.changeset/giant-flies-punch.md

@@ -0,0 +1,5 @@
+---
+"@builder.io/react": patch
+---
+
+chore: send `apiKey` to Visual Editor to improve editing experience.

packages/react-tests/react-vite/src/App.tsx

@@ -80,9 +80,10 @@ function App() {
     Builder.trustedHosts = props.trustedHosts;
   }
 
-  return props || PAGES[window.location.pathname]?.isGen1VisualEditingTest ? (
-    <BuilderComponent {...props} />
+  return PAGES[window.location.pathname]?.isGen1VisualEditingTest ? (
+    <BuilderComponent model='page' {...props} />
   ) : (
+    props ? <BuilderComponent {...props} /> : 
     <div>Content Not Found</div>
   );
 }

packages/react/src/components/builder-component.component.tsx

@@ -734,7 +734,7 @@ export class BuilderComponent extends React.Component<
 
     if (Builder.isIframe) {
       window.parent?.postMessage(
-        { type: 'builder.sdkInjected', data: { modelName: this.name } },
+        { type: 'builder.sdkInjected', data: { modelName: this.name, apiKey: this.props.apiKey || builder.apiKey } },
         '*'
       );
     }

packages/sdks-tests/embedder/index.js

@@ -32,6 +32,8 @@ const server = (req, res) => {
       switch (event.data.type) {
         case 'builder.registerComponent':
           return 'Component name: ' + event.data.data.name;
+           case 'builder.sdkInjected':
+          return 'modelName: ' + event.data.data.modelName + ' apiKey: ' + event.data.data.apiKey;
         default:
           return '';
       }

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

@@ -6,7 +6,7 @@ import {
 } from '../specs/columns.js';
 import { NEW_TEXT } from '../specs/helpers.js';
 import { HOMEPAGE } from '../specs/homepage.js';
-import { checkIsRN, test } from '../helpers/index.js';
+import { checkIsRN, test ,excludeGen2} from '../helpers/index.js';
 import {
   cloneContent,
   launchEmbedderAndWaitForSdk,
@@ -345,4 +345,29 @@ test.describe('Visual Editing', () => {
       await page.frameLocator('iframe').getByText('coffee info: Another coffee brand.').waitFor();
     });
   });
+
+  test.describe('SDK', () => {
+    test('should inject correct SDK data into iframe', async ({ page, basePort, sdk }) => {
+      test.skip(excludeGen2(sdk));
+      let consoleMsg = '';
+      const msgPromise = page.waitForEvent('console',  msg => {
+        if(msg.text().includes('BUILDER_EVENT: builder.sdkInjected')){
+          consoleMsg = msg.text();
+          return true;
+        }
+        return false;
+      });
+      await launchEmbedderAndWaitForSdk({
+        page,
+        basePort,
+        path: '/editing',
+        sdk,
+      });
+      await msgPromise;
+
+      expect(consoleMsg).toContain('modelName: page');
+      expect(consoleMsg).toContain('apiKey: abcd');
+    });
+  });
+  
 });