diff --git a/libs/blocks/locui/loc/index.js b/libs/blocks/locui/loc/index.js index 4c7c8a0fd7..2a5b2e2984 100644 --- a/libs/blocks/locui/loc/index.js +++ b/libs/blocks/locui/loc/index.js @@ -9,11 +9,13 @@ import { telemetry, allowSyncToLangstore, canRefresh, + user, } from '../utils/state.js'; import { setStatus } from '../utils/status.js'; import { getStatus, preview } from '../utils/franklin.js'; import login from '../../../tools/sharepoint/login.js'; import { getServiceUpdates } from '../utils/miloc.js'; +import { connectSK } from '../../../utils/sidekick.js'; const LANG_ACTIONS = ['Translate', 'English Copy', 'Rollout']; const MOCK_REFERRER = 'https%3A%2F%2Fadobe.sharepoint.com%2F%3Ax%3A%2Fr%2Fsites%2Fadobecom%2F_layouts%2F15%2FDoc.aspx%3Fsourcedoc%3D%257B94460FAC-CDEE-4B31-B8E0-AA5E3F45DCC5%257D%26file%3Dwesco-demo.xlsx'; @@ -133,7 +135,26 @@ async function loginToSharePoint() { await login({ scopes, telemetry }); } +async function connectSidekick() { + return new Promise((resolve) => { + const onStatus = ({ detail }) => { + const userInfo = detail?.data?.profile ?? null; + user.value = userInfo; + if (user.value) { + setStatus('details'); + resolve(); + } else { + setStatus('details', 'info', 'Please sign-in to AEM sidekick.'); + } + }; + connectSK(onStatus, () => { + setStatus('details', 'info', 'Please open AEM sidekick to continue.'); + }); + }); +} + export async function setup() { + await connectSidekick(); await loginToSharePoint(); await loadHeading(); await loadDetails(); diff --git a/libs/blocks/locui/loc/view.js b/libs/blocks/locui/loc/view.js index 4366c5e514..ab6905919b 100644 --- a/libs/blocks/locui/loc/view.js +++ b/libs/blocks/locui/loc/view.js @@ -1,6 +1,13 @@ import { html, useEffect } from '../../../deps/htm-preact.js'; import { autoSetup, setup } from './index.js'; -import { showLogin, heading, languages, urls, serviceStatus } from '../utils/state.js'; +import { + showLogin, + heading, + languages, + urls, + serviceStatus, + user, +} from '../utils/state.js'; import { account } from '../../../tools/sharepoint/state.js'; import Heading from '../heading/view.js'; @@ -12,6 +19,14 @@ import Sync from '../sync/view.js'; export default function Localization() { useEffect(() => { autoSetup(); }, []); + + if (!user.value) { + return html` +

Milo Localization

+
<${Status} />
+ `; + } + if (!account.value.username) { return html`

Milo Localization

diff --git a/libs/utils/sidekick.js b/libs/utils/sidekick.js index 80a92c65b4..ce6c1439f9 100644 --- a/libs/utils/sidekick.js +++ b/libs/utils/sidekick.js @@ -95,3 +95,33 @@ export default function init({ createTag, loadBlock, loadScript, loadStyle }) { // Color code publish button stylePublish(sk); } + +function onSkLoaded(callback) { + // sidekick nextGen + const observer = new MutationObserver(() => { + const sidekick = document.querySelector('aem-sidekick'); + if (sidekick) { + observer.disconnect(); + callback(sidekick); + } + }); + observer.observe(document.body, { childList: true, subtree: true }); + + // sidekick v1 ready event + document.addEventListener('sidekick-ready', () => { + callback(document.querySelector('helix-sidekick')); + }, { once: true }); +} + +export function connectSK(status, standby = null) { + const sidekick = document.querySelector('helix-sidekick') + || document.querySelector('aem-sidekick'); + if (sidekick) { + sidekick.addEventListener('statusfetched', status); + } else { + standby?.(); + onSkLoaded((sk) => { + sk?.addEventListener('statusfetched', status); + }); + } +}