Skip to content

Commit

Permalink
1. Add private embedding option to single frame demo
Browse files Browse the repository at this point in the history
2. Add withAllowLoginScreen to builder
  • Loading branch information
bryans99 committed Jan 11, 2025
1 parent d848f1b commit 679358b
Showing 15 changed files with 316 additions and 86 deletions.
89 changes: 89 additions & 0 deletions demo/components.css
Original file line number Diff line number Diff line change
@@ -1033,6 +1033,38 @@ input[type="range"]::-ms-fill-lower {
--tw-ring-color: rgb(28 100 242 / var(--tw-ring-opacity, 1));
}

.form-radio {
height: 1rem;
width: 1rem;
--tw-border-opacity: 1;
border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
--tw-text-opacity: 1;
color: rgb(28 100 242 / var(--tw-text-opacity, 1));
}

.form-radio:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
--tw-ring-opacity: 1;
--tw-ring-color: rgb(63 131 248 / var(--tw-ring-opacity, 1));
}

.form-radio:is(.dark *) {
--tw-border-opacity: 1;
border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
--tw-bg-opacity: 1;
background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
--tw-ring-offset-color: #1F2937;
}

.form-radio:focus:is(.dark *) {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(28 100 242 / var(--tw-ring-opacity, 1));
}

.link {
--tw-text-opacity: 1;
color: rgb(28 100 242 / var(--tw-text-opacity, 1));
@@ -1125,6 +1157,10 @@ input[type="range"]::-ms-fill-lower {
margin-bottom: 0px;
}

.mb-4 {
margin-bottom: 1rem;
}

.flex {
display: flex;
}
@@ -1133,6 +1169,10 @@ input[type="range"]::-ms-fill-lower {
display: none;
}

.h-4 {
height: 1rem;
}

.h-6 {
height: 1.5rem;
}
@@ -1149,6 +1189,10 @@ input[type="range"]::-ms-fill-lower {
width: 50%;
}

.w-4 {
width: 1rem;
}

.w-64 {
width: 16rem;
}
@@ -1229,11 +1273,21 @@ input[type="range"]::-ms-fill-lower {
border-end-start-radius: 0.5rem;
}

.border-gray-300 {
--tw-border-opacity: 1;
border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}

.\!bg-gray-50 {
--tw-bg-opacity: 1 !important;
background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1)) !important;
}

.bg-gray-100 {
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.bg-gray-200 {
--tw-bg-opacity: 1;
background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
@@ -1284,6 +1338,11 @@ input[type="range"]::-ms-fill-lower {
line-height: 2.25rem;
}

.text-blue-600 {
--tw-text-opacity: 1;
color: rgb(28 100 242 / var(--tw-text-opacity, 1));
}

.shadow-lg {
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -1294,7 +1353,37 @@ input[type="range"]::-ms-fill-lower {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.focus\:ring-2:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-blue-500:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(63 131 248 / var(--tw-ring-opacity, 1));
}

.dark\:border-gray-600:is(.dark *) {
--tw-border-opacity: 1;
border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}

.dark\:\!bg-gray-700:is(.dark *) {
--tw-bg-opacity: 1 !important;
background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1)) !important;
}

.dark\:bg-gray-700:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}

.dark\:ring-offset-gray-800:is(.dark *) {
--tw-ring-offset-color: #1F2937;
}

.dark\:focus\:ring-blue-600:focus:is(.dark *) {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(28 100 242 / var(--tw-ring-opacity, 1));
}
12 changes: 5 additions & 7 deletions demo/demo_config.ts
Original file line number Diff line number Diff line change
@@ -57,16 +57,15 @@ export interface RuntimeConfig {
* toggle will be hidden.
*/
showExtension: boolean
/**
* When true will use cookieless embed. When false will use
* SSO signing.
*/
useCookieless: boolean
/**
* Dashboards only. When true, will dynamically change height of
* dashboard IFRAME.
*/
useDynamicHeights: boolean
/**
* Type of embedding to demonstrate
*/
embedType: string
}

const lookerHost = 'mycompany.looker.com'
@@ -107,6 +106,7 @@ const _lookId = getId(lookId, process.env.LOOKER_LOOK_ID)
let runtimeConfig: RuntimeConfig = {
dashboardId: _dashboardId,
dashboardId2: _dashboardId2,
embedType: process.env.LOOKER_EMBED_TYPE || 'signed',
exploreId: _exploreId,
extensionId: _extensionId,
lookId: _lookId,
@@ -117,8 +117,6 @@ let runtimeConfig: RuntimeConfig = {
showExplore: typeof _exploreId === 'string' && _exploreId.trim() !== '',
showExtension: typeof _extensionId === 'string' && _extensionId.trim() !== '',
showLook: _lookId === 'string' && _lookId.trim() !== '',
useCookieless:
process.env.LOOKER_COOKIELESS_ENABLED === 'true' ? true : cookielessEmbedV2,
useDynamicHeights: false,
}

56 changes: 42 additions & 14 deletions demo/demo_single_frame.ts
Original file line number Diff line number Diff line change
@@ -116,19 +116,40 @@ const preventNavigation = (event: any): any => {
}

/**
* Initialize the use cookieless configuration checkbox.
* Update embed demo type
*/
const initializeUseCookielessCheckbox = () => {
const cb = document.getElementById('useCookieless') as HTMLInputElement
if (cb) {
const { useCookieless } = getConfiguration()
cb.checked = useCookieless
cb.addEventListener('change', (event: any) => {
const runtimeConfig = getConfiguration()
runtimeConfig.useCookieless = event.target.checked
updateConfiguration(runtimeConfig)
location.reload()
})
const updateEmbedType = (event: any) => {
const runtimeConfig = getConfiguration()
runtimeConfig.embedType = event.target.value
updateConfiguration(runtimeConfig)
location.reload()
}

/**
* Initialize the embed type configuration radio buttons.
*/
const initializeEmbedTypeRadioButtons = () => {
const signedRb = document.getElementById('useSigned') as HTMLInputElement
const cookielessRb = document.getElementById(
'useCookieless'
) as HTMLInputElement
const privateRb = document.getElementById('usePrivate') as HTMLInputElement
if (signedRb && cookielessRb && privateRb) {
const { embedType } = getConfiguration()
switch (embedType) {
case 'cookieless':
cookielessRb.checked = true
break
case 'private':
privateRb.checked = true
break
default:
signedRb.checked = true
break
}
signedRb.addEventListener('change', updateEmbedType)
cookielessRb.addEventListener('change', updateEmbedType)
privateRb.addEventListener('change', updateEmbedType)
}
}

@@ -349,7 +370,7 @@ const initializeContentControls = () => {
const initializeControls = () => {
updateContentControls()
initializePreventNavigationCheckbox()
initializeUseCookielessCheckbox()
initializeEmbedTypeRadioButtons()
initializeUseDynamicHeightsCheckbox()
initializeTabs()
initializeContentControls()
@@ -385,6 +406,10 @@ const createEmbed = (runtimeConfig: RuntimeConfig, sdk: ILookerEmbedSDK) => {
.withScrollMonitor(runtimeConfig.useDynamicHeights)
// Allow fullscreen tile visualizations
.withAllowAttr('fullscreen')
// Applicable to private embed only. If the user is not logged in,
// the Looker login page will be displayed. Note that this will not
// in Looker core.
.withAllowLoginScreen()
// Append to the #dashboard element
.appendTo('#embed-container')
.on('page:changed', (event: PageChangedEvent) => {
@@ -442,13 +467,16 @@ const createEmbed = (runtimeConfig: RuntimeConfig, sdk: ILookerEmbedSDK) => {
*/
const initializeEmbedSdk = (runtimeConfig: RuntimeConfig) => {
const sdk: ILookerEmbedSDK = getEmbedSDK()
if (runtimeConfig.useCookieless) {
if (runtimeConfig.embedType === 'cookieless') {
// Use cookieless embed
sdk.initCookieless(
runtimeConfig.lookerHost,
'/acquire-embed-session',
'/generate-embed-tokens'
)
} else if (runtimeConfig.embedType === 'private') {
// Use private embedding
sdk.init(runtimeConfig.lookerHost)
} else {
// Use SSO embed
sdk.init(runtimeConfig.lookerHost, '/auth')
76 changes: 59 additions & 17 deletions demo/index.html
Original file line number Diff line number Diff line change
@@ -18,24 +18,66 @@
<body class="p-5 h-dvh flex flex-col">
<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">
<input type="checkbox" id="useCookieless" class="form-checkbox" />
<label class="form-checkbox-label" for="useCookieless"
>Use cookieless</label
>
<div class="flex-col">
<div class="flex-auto flex space-x-5">
<div class="flex items-center mb-4">
<input
id="useSigned"
type="radio"
value="signed"
name="embedType"
class="form-radio"
/>
<label for="useSigned" class="form-checkbox-label"
>Use signed URL</label
>
</div>
<div class="flex items-center mb-4">
<input
id="useCookieless"
type="radio"
value="cookieless"
name="embedType"
class="form-radio"
/>
<label for="useCookieless" class="form-checkbox-label"
>Use cookieless</label
>
</div>
<div class="flex items-center mb-4">
<input
id="usePrivate"
type="radio"
value="private"
name="embedType"
class="form-radio"
/>
<label for="usePrivate" class="form-checkbox-label"
>Use private</label
>
</div>
</div>
<div class="pt-1">
<input type="checkbox" id="useDynamicHeights" class="form-checkbox" />
<label class="form-checkbox-label" for="useDynamicHeights"
>Use dynamic heights</label
>
</div>
<div class="pt-1 pb-2">
<input type="checkbox" id="preventNavigation" class="form-checkbox" />
<label class="form-checkbox-label" for="preventNavigation"
>Prevent navigation</label
>
<div class="flex-auto flex space-x-5">
<div class="pt-1">
<input
type="checkbox"
id="useDynamicHeights"
class="form-checkbox"
/>
<label class="form-checkbox-label" for="useDynamicHeights"
>Use dynamic heights</label
>
</div>
<div class="pt-1 pb-2">
<input
type="checkbox"
id="preventNavigation"
class="form-checkbox"
/>
<label class="form-checkbox-label" for="preventNavigation"
>Prevent navigation</label
>
</div>
</div>
</div>
<div class="flex-auto flex flex-col text-right">
2 changes: 1 addition & 1 deletion docs/assets/search.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/index.html
Original file line number Diff line number Diff line change
@@ -61,7 +61,7 @@ <h2>Building URLs for the SDK</h2>
<li>It will add the <code>embed_domain</code> parameter if missing.</li>
<li>It will throw an error if the URL is invalid.</li>
</ol>
<pre><code class="language-html"><span class="hl-1">/embed/looks/4?embed_domain=https://mywebsite.com =&gt;</span><br/><span class="hl-1">/embed/looks/4?embed_domain=https://mywebsite.com&amp;sdk=2</span>
<pre><code class="language-html"><span class="hl-1">/embed/looks/4?embed_domain=https://mywebsite.com =&gt;</span><br/><span class="hl-1">/embed/looks/4?embed_domain=https://mywebsite.com&amp;sdk=3</span>
</code></pre>

<a href="#signed-url-auth-endpoint" id="signed-url-auth-endpoint" style="color: inherit; text-decoration: none;">
Loading

0 comments on commit 679358b

Please sign in to comment.