MWPW-146681 - [LocUI] sidekick integration

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();

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`
+      <h1>Milo Localization</h1>
+      <div><${Status} /></div>
+    `;
+  }
+
   if (!account.value.username) {
     return html`
       <h1>Milo Localization</h1>

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);
+    });
+  }
+}