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

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
looker-open-source · Jan 9, 2025 · e7c4c1e · e7c4c1e
1 parent 6483368
commit e7c4c1e
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 32 deletions.
diff --git a/demo/demo_v1.html → demo/demo_multi_frame.html b/demo/demo_v1.html → 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_v1.ts → demo/demo_multi_frame.ts b/demo/demo_v1.ts → 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.ts → demo/demo_single_frame.ts b/demo/demo.ts → 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: {