1. Add new method to original SDK to return instance of new

bryans99 · bryans99 · commit e7c4c1e6fd31 · 2025-01-09T00:56:42.000Z
SDK.
2. Rename original demo to multi frame demo
3. Rename new demo to single frame demo
4. Change title of message example tp Embed Message API Demo
diff --git a/demo/demo_multi_frame.html b/demo/demo_multi_frame.html
@@ -3,13 +3,13 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Looker Embed SDK Demo (V1)</title>
+    <title>Looker Embed SDK Multi Frame Demo</title>
     <link href="components.css" rel="stylesheet" />
     <link href="demo.css" rel="stylesheet" type="text/css" />
-    <script src="demo_v1.js"></script>
+    <script src="demo_multi_frame.js"></script>
   </head>
   <body class="pt-5">
-    <h1 class="main-heading">Looker Embed SDK Demo Page (V1)</h1>
+    <h1 class="main-heading">Looker Embed SDK Multi Frame Demo</h1>
     <div id="controls" class="flex pt-5 gap-5 px-5">
       <div class="flex-auto flex gap-2">
         <div class="flex flex-col text-left">
@@ -71,8 +71,8 @@ <h1 class="main-heading">Looker Embed SDK Demo Page (V1)</h1>
         </div>
       </div>
       <div class="flex-auto text-right flex flex-col">
-        <a href="index.html" class="link">Embed SDK Demo (V2)</a>
-        <a href="message_example.html" class="link">Window Message Example</a>
+        <a href="index.html" class="link">Single Frame Demo</a>
+        <a href="message_example.html" class="link">Embed Message API Demo</a>
       </div>
     </div>
     <div class="embed-container">
diff --git a/demo/demo_multi_frame.ts b/demo/demo_multi_frame.ts
@@ -27,10 +27,11 @@
 // IDs for content to demonstrate are configured in demo_config.ts
 
 import type {
-  LookerEmbedLook,
-  LookerEmbedDashboard,
-  LookerEmbedExplore,
   SessionStatus,
+  ILookerConnection,
+  ILookerEmbedDashboard,
+  ILookerEmbedExplore,
+  ILookerEmbedLook,
 } from '../src/index'
 import { LookerEmbedSDK } from '../src/index'
 import type { RuntimeConfig } from './demo_config'
@@ -41,9 +42,9 @@ import {
   resetConfiguration,
 } from './demo_config'
 
-let currentDashboard: LookerEmbedDashboard | undefined
-let currentLook: LookerEmbedLook | undefined
-let currentExplore: LookerEmbedExplore | undefined
+let currentDashboard: ILookerEmbedDashboard | undefined
+let currentLook: ILookerEmbedLook | undefined
+let currentExplore: ILookerEmbedExplore | undefined
 
 const initializeRunAllButton = () => {
   // Add a listener to the "Run All" button and send 'xxxx:run' messages when clicked
@@ -66,7 +67,8 @@ const initializeRunAllButton = () => {
 /**
  * Set up the dashboard after the SDK connects
  */
-const setupDashboard = (dashboard: LookerEmbedDashboard) => {
+const setupDashboard = (connection: ILookerConnection) => {
+  const dashboard = connection.asDashboardConnection()
   currentDashboard = dashboard
 
   // Add a listener to the dashboard's "Run" button and send a 'dashboard:run' message when clicked
@@ -101,7 +103,8 @@ const setupDashboard = (dashboard: LookerEmbedDashboard) => {
 /**
  * Set up the look after the SDK connects.
  */
-const setupLook = (look: LookerEmbedLook) => {
+const setupLook = (connection: ILookerConnection) => {
+  const look = connection.asLookConnection()
   currentLook = look
 
   // Add a listener to the look's "Run" button and send a 'look:run' message when clicked
@@ -124,7 +127,8 @@ const setupLook = (look: LookerEmbedLook) => {
 /**
  * Set up the explore after the SDK connects.
  */
-const setupExplore = (explore: LookerEmbedExplore) => {
+const setupExplore = (connection: ILookerConnection) => {
+  const explore = connection.asExploreConnection()
   currentExplore = explore
 
   // Add a listener to the explore's "Run" button and send a 'explore:run' message when clicked
@@ -354,7 +358,8 @@ const renderDashboard = (runtimeConfig: RuntimeConfig) => {
   if (runtimeConfig.showDashboard) {
     document.querySelector<HTMLDivElement>('#demo-dashboard')!.style.display =
       ''
-    LookerEmbedSDK.createDashboardWithId(runtimeConfig.dashboardId)
+    LookerEmbedSDK.getSDK()
+      .createDashboardWithId(runtimeConfig.dashboardId)
       // When true scrolls the top of the IFRAME into view
       .withDialogScroll(runtimeConfig.useDynamicHeights)
       // When true updates the IFRAME height to reflect the height of the
@@ -427,7 +432,8 @@ const renderLook = (runtimeConfig: RuntimeConfig) => {
   // Create an embedded Look
   if (runtimeConfig.showLook) {
     document.querySelector<HTMLDivElement>('#demo-look')!.style.display = ''
-    LookerEmbedSDK.createLookWithId(parseInt(runtimeConfig.lookId, 10))
+    LookerEmbedSDK.getSDK()
+      .createLookWithId(parseInt(runtimeConfig.lookId, 10))
       // Append to the #look element
       .appendTo('#look')
       // Listen to messages to display progress
@@ -469,7 +475,8 @@ const renderExplore = (runtimeConfig: RuntimeConfig) => {
   // Create an embedded Explore
   if (runtimeConfig.showExplore) {
     document.querySelector<HTMLDivElement>('#demo-explore')!.style.display = ''
-    LookerEmbedSDK.createExploreWithId(runtimeConfig.exploreId)
+    LookerEmbedSDK.getSDK()
+      .createExploreWithId(runtimeConfig.exploreId)
       // Append to the #explore element
       .appendTo('#explore')
       // Listen to messages to display progress
@@ -510,7 +517,8 @@ const renderExtension = (runtimeConfig: RuntimeConfig) => {
   if (runtimeConfig.showExtension) {
     document.querySelector<HTMLDivElement>('#demo-extension')!.style.display =
       ''
-    LookerEmbedSDK.createExtensionWithId(runtimeConfig.extensionId)
+    LookerEmbedSDK.getSDK()
+      .createExtensionWithId(runtimeConfig.extensionId)
       // Append to the #extension element
       .appendTo('#extension')
       .on('session:status', (event: SessionStatus) => {
@@ -542,14 +550,14 @@ const renderExtension = (runtimeConfig: RuntimeConfig) => {
 const initializeEmbedSdk = (runtimeConfig: RuntimeConfig) => {
   if (runtimeConfig.useCookieless) {
     // Use cookieless embed
-    LookerEmbedSDK.initCookieless(
-      runtimeConfig.lookerHost,
+    LookerEmbedSDK.getSDK().initCookieless(
+      runtimeConfig.getSDK().lookerHost,
       '/acquire-embed-session',
       '/generate-embed-tokens'
     )
   } else {
     // Use SSO embed
-    LookerEmbedSDK.init(runtimeConfig.lookerHost, '/auth')
+    LookerEmbedSDK.getSDK().init(runtimeConfig.lookerHost, '/auth')
   }
 }
 
diff --git a/demo/demo_single_frame.ts b/demo/demo_single_frame.ts
diff --git a/demo/index.html b/demo/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Looker Embed SDK Demo (V2)</title>
+    <title>Looker Embed SDK Single Frame Demo</title>
     <link href="components.css" rel="stylesheet" />
     <style>
       #embed-container {
@@ -13,10 +13,10 @@
         }
       }
     </style>
-    <script src="demo.js"></script>
+    <script src="demo_single_frame.js"></script>
   </head>
   <body class="p-5 h-dvh flex flex-col">
-    <h1 class="main-heading">Looker Embed SDK Demo Page (V2)</h1>
+    <h1 class="main-heading">Looker Embed SDK Single Frame Demo</h1>
     <div id="controls" class="flex pt-5">
       <div class="flex-auto flex space-x-5">
         <div class="pt-1">
@@ -39,8 +39,8 @@ <h1 class="main-heading">Looker Embed SDK Demo Page (V2)</h1>
         </div>
       </div>
       <div class="flex-auto flex flex-col text-right">
-        <a href="demo_v1.html" class="link">Embed SDK Demo (V1)</a>
-        <a href="message_example.html" class="link">Window Message Example</a>
+        <a href="demo_multi_frame.html" class="link">Multi Frame Demo</a>
+        <a href="message_example.html" class="link">Embed Message API Demo</a>
       </div>
     </div>
     <div class="tabs-container">
diff --git a/demo/message_example.html b/demo/message_example.html
@@ -3,13 +3,13 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Looker Embed Window Message Example</title>
+    <title>Looker Embed Message API Demo</title>
     <link href="components.css" rel="stylesheet" />
     <link href="demo.css" rel="stylesheet" type="text/css" />
     <script src="message_example.js"></script>
   </head>
   <body class="pt-5">
-    <h1 class="main-heading">Looker Embed Window Message Example</h1>
+    <h1 class="main-heading">Looker Embed Message API Demo</h1>
     <div id="controls" class="flex pt-5 gap-5 px-5">
       <div class="flex-auto flex flex-col text-left">
         <div class="pt-2">
@@ -47,8 +47,8 @@ <h1 class="main-heading">Looker Embed Window Message Example</h1>
         </div>
       </div>
       <div class="flex-auto text-right flex flex-col">
-        <a href="demo_v1.html" class="link">Embed SDK Demo (V1)</a>
-        <a href="index.html" class="link">Embed SDK Demo (V2)</a>
+        <a href="index.html" class="link">Single Frame Demo</a>
+        <a href="demo_multi_frame.html" class="link">Multi Frame Demo</a>
       </div>
     </div>
     <div class="embed-container">
diff --git a/src/index.ts b/src/index.ts
@@ -34,6 +34,7 @@ import type {
   CookielessCallback,
   CookielessRequestInit,
 } from './types'
+import { getSDKFactory } from './v2/LookerEmbedSDKFactory'
 
 export type { LookerEmbedDashboard } from './dashboard_client'
 export type { LookerEmbedExplore } from './explore_client'
@@ -210,6 +211,20 @@ export class LookerEmbedSDK {
     ).withId(id)
   }
 
+  /**
+   * Create an instance of the new combined connection Embed SDK. The combined
+   * connection Embed SDK allows a developer to create a single connection for
+   * all Looker object types (dashboard, explores, looks, extensions). The
+   * developer can use the connection to navigate to different object types
+   * within Looker without having to recreate the IFRAME.
+   *
+   * Requires Looker version 25.0 or above.
+   */
+
+  static getSDK() {
+    return getSDKFactory().getSDK()
+  }
+
   /**
    * @hidden
    */
diff --git a/tests/v2/LookerEmbedSDKFactory.spec.ts b/tests/v2/LookerEmbedSDKFactory.spec.ts
@@ -24,6 +24,7 @@
 
  */
 
+import { LookerEmbedSDK } from '../../src'
 import {
   getSDKFactory,
   LookerEmbedSDKFactory,
@@ -41,4 +42,10 @@ describe('LookerEmbedSDKFactory', () => {
     const factory = new LookerEmbedSDKFactory(sdk)
     expect(sdk === factory.getSDK()).toBeTruthy()
   })
+
+  it('returns an instance of the new SDK from the original SDK', () => {
+    const sdk = LookerEmbedSDK.getSDK()
+    expect(sdk).toBeDefined()
+    expect(LookerEmbedSDK.getSDK()).toBe(sdk)
+  })
 })
diff --git a/webpack-devserver.config.js b/webpack-devserver.config.js
@@ -10,8 +10,8 @@ var webpackConfig = {
   mode: 'development',
   devtool: 'source-map',
   entry: {
-    demo: './demo/demo.ts',
-    demo_v1: './demo/demo_v1.ts',
+    demo_single_frame: './demo/demo_single_frame.ts',
+    demo_multi_frame: './demo/demo_multi_frame.ts',
     message_example: './demo/message_example.ts',
   },
   output: {
