From d1e093cfc729dbfd9951032d91f838241984f790 Mon Sep 17 00:00:00 2001
From: Chris Millar <cmillar@apache.org>
Date: Tue, 6 Aug 2024 23:26:09 -0600
Subject: [PATCH] Library plugins (#192)

---
 blocks/edit/da-library/da-library.css     | 23 +++++++++++-
 blocks/edit/da-library/da-library.js      | 21 +++++++++--
 blocks/edit/da-library/helpers/helpers.js | 45 ++++++++++++++++-------
 3 files changed, 72 insertions(+), 17 deletions(-)

diff --git a/blocks/edit/da-library/da-library.css b/blocks/edit/da-library/da-library.css
index b3c04de4..52906b07 100644
--- a/blocks/edit/da-library/da-library.css
+++ b/blocks/edit/da-library/da-library.css
@@ -122,6 +122,10 @@ button span {
   background: url('/blocks/edit/img/library-back.svg') center center / 18px no-repeat;
 }
 
+.da-library-item-list-main button {
+  background: #FFF;
+}
+
 .da-library-item-list-main button.blocks {
   background: url('/blocks/edit/img/Smock_Table_18_N.svg') 18px center / 18px no-repeat;
 }
@@ -142,7 +146,8 @@ button span {
   background: url('/blocks/edit/img/Smock_Image_18_N.svg') 18px center / 18px no-repeat;
 }
 
-.da-library-item-list-main button.plugins {
+.da-library-item-list-main button.plugins,
+.da-library-item-list-main button.is-plugin {
   background: url('/blocks/edit/img/Smock_Plug_18_N.svg') 18px center / 18px no-repeat;
 }
 
@@ -408,3 +413,19 @@ ul {
   opacity: 1;
   z-index: 1;
 }
+
+/* Plugins */
+.da-library-type-plugin {
+  position: absolute;
+  top: 44px;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.da-library-type-plugin iframe {
+  border: none;
+  display: block;
+  width: 100%;
+  height: 100%;
+}
diff --git a/blocks/edit/da-library/da-library.js b/blocks/edit/da-library/da-library.js
index 3d77bdbc..f21114d5 100644
--- a/blocks/edit/da-library/da-library.js
+++ b/blocks/edit/da-library/da-library.js
@@ -1,5 +1,5 @@
 import { DOMParser as proseDOMParser } from 'da-y-wrapper';
-import { LitElement, html, until } from '../../../deps/lit/lit-all.min.js';
+import { LitElement, html, until, nothing } from '../../../deps/lit/lit-all.min.js';
 import { getBlocks, getBlockVariants } from './helpers/index.js';
 import getSheet from '../../shared/sheet.js';
 import inlinesvg from '../../shared/inlinesvg.js';
@@ -173,7 +173,22 @@ class DaLibrary extends LitElement {
       </ul>`;
   }
 
-  async renderLibrary({ name, sources, format }) {
+  renderPlugin(url) {
+    return html`
+      <div class="da-library-type-plugin">
+        <iframe
+          src="${url}"
+          allow="clipboard-write *"
+          scrolling="no"></iframe>
+      </div>`;
+  }
+
+  async renderLibrary({ name, sources, url, format }) {
+    // Only plugins have a URL
+    if (url) {
+      return this.renderPlugin(url);
+    }
+
     if (name === 'blocks') {
       const blocks = await getBlocks(sources);
       return this.renderGroups(blocks);
@@ -203,7 +218,7 @@ class DaLibrary extends LitElement {
             <ul class="da-library-item-list da-library-item-list-main">
               ${this._libraryList.map((library) => html`
                 <li>
-                  <button class="${library.name}" @click=${this.handleLibSwitch}>
+                  <button class="${library.name} ${library.url ? 'is-plugin' : ''}" @click=${this.handleLibSwitch}>
                     <span class="library-type-name">${library.name}</span>
                   </button>
                 </li>
diff --git a/blocks/edit/da-library/helpers/helpers.js b/blocks/edit/da-library/helpers/helpers.js
index f65d5ec2..d654c4e8 100644
--- a/blocks/edit/da-library/helpers/helpers.js
+++ b/blocks/edit/da-library/helpers/helpers.js
@@ -58,24 +58,13 @@ let currOwner;
 let currRepo;
 let libraries;
 
-export async function getLibraryList() {
-  const { owner, repo } = getPathDetails();
-  if (!owner || !repo) return [];
-
-  if (currOwner === owner
-    && currRepo === repo
-    && libraries) {
-    return libraries;
-  }
-  currOwner = owner;
-  currRepo = repo;
-
+async function getDaLibraries(owner, repo) {
   const resp = await daFetch(`${DA_ORIGIN}/source/${owner}/${repo}${DA_CONFIG}`);
   if (!resp.ok) return [];
 
   const { data } = await resp.json();
 
-  libraries = data.reduce((acc, item) => {
+  return data.reduce((acc, item) => {
     const keySplit = item.key.split('-');
     if (keySplit[0] === 'library') {
       acc.push({
@@ -86,6 +75,36 @@ export async function getLibraryList() {
     }
     return acc;
   }, []);
+}
+
+async function getAemPlugins(owner, repo, ref = 'main') {
+  const resp = await daFetch(`https://admin.hlx.page/sidekick/${owner}/${repo}/${ref}/config.json`);
+  if (!resp.ok) return [];
+  const json = await resp.json();
+  if (json.plugins.length === 0) return [];
+  return json.plugins.reduce((acc, plugin) => {
+    if (plugin.daLibrary) acc.push({ name: plugin.title, url: plugin.url });
+    return acc;
+  }, []);
+}
+
+export async function getLibraryList() {
+  const { owner, repo } = getPathDetails();
+  if (!owner || !repo) return [];
+
+  if (currOwner === owner
+    && currRepo === repo
+    && libraries) {
+    return libraries;
+  }
+  currOwner = owner;
+  currRepo = repo;
+
+  const daLibraries = getDaLibraries(owner, repo);
+  const aemPlugins = getAemPlugins(owner, repo);
+
+  const [da, aem] = await Promise.all([daLibraries, aemPlugins]);
+  libraries = [...da, ...aem];
 
   return libraries;
 }