diff --git a/demo/demo_v1.html b/demo/demo_multi_frame.html similarity index 92% rename from demo/demo_v1.html rename to demo/demo_multi_frame.html index a1e4e3f..cda22a7 100644 --- a/demo/demo_v1.html +++ b/demo/demo_multi_frame.html @@ -3,13 +3,13 @@ - Looker Embed SDK Demo (V1) + Looker Embed SDK Multi Frame Demo - + -

Looker Embed SDK Demo Page (V1)

+

Looker Embed SDK Multi Frame Demo

@@ -71,8 +71,8 @@

Looker Embed SDK Demo Page (V1)

- Embed SDK Demo (V2) - Window Message Example + Single Frame Demo + Embed Message API Demo
diff --git a/demo/demo_v1.ts b/demo/demo_multi_frame.ts similarity index 94% rename from demo/demo_v1.ts rename to demo/demo_multi_frame.ts index 3c3df09..34b7584 100644 --- a/demo/demo_v1.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('#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('#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('#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('#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 b/demo/demo_single_frame.ts similarity index 100% rename from demo/demo.ts rename to demo/demo_single_frame.ts diff --git a/demo/index.html b/demo/index.html index 3d4cb4e..815c992 100644 --- a/demo/index.html +++ b/demo/index.html @@ -3,7 +3,7 @@ - Looker Embed SDK Demo (V2) + Looker Embed SDK Single Frame Demo - + -

Looker Embed SDK Demo Page (V2)

+

Looker Embed SDK Single Frame Demo

@@ -39,8 +39,8 @@

Looker Embed SDK Demo Page (V2)

- Embed SDK Demo (V1) - Window Message Example + Multi Frame Demo + Embed Message API Demo
diff --git a/demo/message_example.html b/demo/message_example.html index 1f2fca0..69c9c21 100644 --- a/demo/message_example.html +++ b/demo/message_example.html @@ -3,13 +3,13 @@ - Looker Embed Window Message Example + Looker Embed Message API Demo -

Looker Embed Window Message Example

+

Looker Embed Message API Demo

@@ -47,8 +47,8 @@

Looker Embed Window Message Example

- Embed SDK Demo (V1) - Embed SDK Demo (V2) + Single Frame Demo + Multi Frame Demo
diff --git a/src/index.ts b/src/index.ts index 8ad920b..87700ba 100644 --- 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 index 17ce3f4..023fcdb 100644 --- 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 index 855df1c..01f83be 100644 --- 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: {