feat: popover plugin support (#475)

Author: dylandepass

package-lock.json

@@ -53,6 +53,7 @@
     "@spectrum-web-components/menu": "0.43.0",
     "@spectrum-web-components/overlay": "0.43.0",
     "@spectrum-web-components/picker": "0.43.0",
+    "@spectrum-web-components/popover": "0.43.0",
     "@spectrum-web-components/progress-circle": "0.43.0",
     "@spectrum-web-components/search": "0.43.0",
     "@spectrum-web-components/status-light": "0.43.0",

package.json

@@ -143,6 +143,18 @@ export const style = css`
     opacity: 0.5;
   }
 
+  action-bar overlay-trigger sp-popover .content {
+    padding: 10px;
+    height: 100%;
+  }
+
+  action-bar overlay-trigger sp-popover .content iframe {
+    width: 100%;
+    height: 100%;
+    border: 0;
+    color-scheme: auto;
+  }
+
   #plugin-menu sp-menu-group [slot="header"] {
     text-transform: uppercase;
     font-size: var(--spectrum-global-dimension-font-size-75);

src/extension/app/components/plugin/plugin-action-bar.css.js

@@ -147,6 +147,13 @@ export class PluginActionBar extends ConnectedElement {
       },
     );
 
+    reaction(
+      () => this.appStore.theme,
+      async () => {
+        this.setupPlugins();
+      },
+    );
+
     reaction(
       () => this.appStore.bulkStore.selection,
       () => {

src/extension/app/components/plugin/plugin-action-bar.js

@@ -13,6 +13,7 @@
 /* eslint-disable max-len */
 
 import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { EXTERNAL_EVENTS } from '../../constants.js';
 
 /**
@@ -150,6 +151,14 @@ export class Plugin {
     return this.config.isBadge;
   }
 
+  /**
+   * Is this plugin a popover?
+   * @returns {boolean} True if the plugin is a popover
+   */
+  isPopover() {
+    return this.config.isPopover;
+  }
+
   /**
    * Adds a plugin to this plugin's children.
    * @param {Plugin} plugin The plugin to add
@@ -257,13 +266,44 @@ export class Plugin {
         `;
       }
 
+      if (this.isPopover() && this.config.url) {
+        const {
+          url, popoverRect, title, titleI18n,
+        } = this.config;
+
+        const popoverTitle = titleI18n?.[this.appStore.siteStore.lang] || title;
+        const src = new URL(url);
+        src.searchParams.set('theme', this.appStore.theme);
+
+        let filteredPopoverRect = popoverRect;
+        if (popoverRect) {
+          filteredPopoverRect = `${popoverRect
+            .split(';')
+            .map((s) => s.trim())
+            .filter((s) => s.startsWith('width:') || s.startsWith('height:'))
+            .join('; ')};`;
+        }
+
+        return html`
+          <overlay-trigger receivesFocus="true" offset="-3">
+            <sk-action-button quiet slot="trigger">${this.getButtonText()}</sk-action-button>
+            <sp-popover slot="click-content" placement="top" tip style=${ifDefined(filteredPopoverRect)}>
+              <div class="content">
+                <iframe title=${popoverTitle || 'Popover content'} src=${src}></iframe>
+              </div>
+            </sp-popover>
+          </overlay-trigger>`;
+      }
+
       return html`
         <sk-action-button
           class=${this.getId()}
           .disabled=${!this.isEnabled()}
           quiet
           @click=${(evt) => this.onButtonClick(evt)}
-        >${this.getButtonText()}</sk-action-button>
+        >
+          ${this.getButtonText()}
+        </sk-action-button>
       `;
     }
 

src/extension/app/components/plugin/plugin.js

@@ -337,6 +337,8 @@ export class AppStore {
             passConfig,
             passReferrer,
             isPalette,
+            isPopover,
+            popoverRect,
             event: eventName,
             environments,
             excludePaths,
@@ -378,6 +380,8 @@ export class AppStore {
           const plugin = {
             custom: true,
             id,
+            title,
+            titleI18n,
             condition,
             button: {
               text: (titleI18n && titleI18n[lang]) || title,
@@ -417,7 +421,10 @@ export class AppStore {
             pinned,
             confirm,
             container: containerId,
+            url,
             isBadge,
+            isPopover,
+            popoverRect,
             badgeVariant,
           };
 

src/extension/app/store/app.js

@@ -18,6 +18,8 @@ import '@spectrum-web-components/divider/sp-divider.js';
 import '@spectrum-web-components/dialog/sp-dialog-base.js';
 import '@spectrum-web-components/menu/sp-menu-divider.js';
 import '@spectrum-web-components/overlay/sp-overlay.js';
+import '@spectrum-web-components/overlay/overlay-trigger.js';
+import '@spectrum-web-components/popover/sp-popover.js';
 import '@spectrum-web-components/picker/sp-picker.js';
 import '@spectrum-web-components/status-light/sp-status-light.js';
 import '@spectrum-web-components/switch/sp-switch.js';

src/extension/index.js

@@ -109,6 +109,8 @@
  * @prop {boolean} [isContainer] Determines whether to turn this plugin into a dropdown
  * @prop {boolean} [isPalette] Determines whether a URL is opened in a palette instead of a new tab
  * @prop {string} [paletteRect] The dimensions and position of a palette (optional)
+ * @prop {boolean} [isPopover] Determines whether a URL is opened in a popover instead of a new tab
+ * @prop {string} [popoverRect] The dimensions of a popover (optional)
  * @prop {boolean} [isBadge] Determines whether the plugin is a badge (optional)
  * @prop {string} [badgeVariant] The color variant of the badge (optional)
  * @prop {string[]} [environments] Specifies when to show this plugin (admin, edit, dev, preview, live, prod)

src/extension/types/typedefs.js

@@ -12,6 +12,7 @@
 /* eslint-disable no-unused-expressions, import/no-extraneous-dependencies */
 
 import { expect } from '@open-wc/testing';
+import { render } from 'lit';
 import chromeMock from '../../../mocks/chrome.js';
 import { Plugin } from '../../../../src/extension/app/components/plugin/plugin.js';
 import { AppStore } from '../../../../src/extension/app/store/app.js';
@@ -48,6 +49,18 @@ const TEST_BADGE_CONFIG = {
   },
 };
 
+const TEST_POPOVER_CONFIG = {
+  id: 'test',
+  title: 'Test Popover',
+  isPopover: true,
+  popoverRect: 'width: 100px; height: 100px;',
+  url: 'https://labs.aem.live/tools/snapshot-admin/palette.html?foo=bar',
+  button: {
+    text: 'Test Child',
+    action: () => {},
+  },
+};
+
 describe('Plugin', () => {
   const appStore = new AppStore();
 
@@ -124,6 +137,66 @@ describe('Plugin', () => {
     parent.append(child);
   });
 
+  it('renders a popover plugin', async () => {
+    appStore.theme = 'dark';
+    const plugin = new Plugin({ ...TEST_POPOVER_CONFIG }, appStore);
+
+    const container = document.createElement('div');
+    render(plugin.render(), container);
+
+    // Wait for next time to let lit process the update
+    await Promise.resolve();
+
+    const overlayTrigger = container.querySelector('overlay-trigger');
+    expect(overlayTrigger).to.exist;
+    expect(overlayTrigger.getAttribute('offset')).to.equal('-3');
+
+    const popover = container.querySelector('sp-popover');
+    expect(popover).to.exist;
+    expect(popover.getAttribute('placement')).to.equal('top');
+
+    const popoverStyle = popover.getAttribute('style');
+    expect(popoverStyle).to.include('width: 100px; height: 100px;');
+
+    const iframe = container.querySelector('iframe');
+    expect(iframe).to.exist;
+    expect(iframe.getAttribute('title')).to.equal(TEST_POPOVER_CONFIG.title);
+    expect(iframe.getAttribute('src')).to.include(TEST_POPOVER_CONFIG.url);
+    expect(iframe.getAttribute('src')).to.include('?foo=bar&theme=dark');
+  });
+
+  it('renders a popover plugin with filtered popoverRect', async () => {
+    const config = { ...TEST_POPOVER_CONFIG };
+    config.popoverRect = 'width: 100px; height: 100px; background-color: red;';
+    const plugin = new Plugin({ ...config }, appStore);
+
+    const container = document.createElement('div');
+    render(plugin.render(), container);
+
+    // Wait for next time to let lit process the update
+    await Promise.resolve();
+
+    const popover = container.querySelector('sp-popover');
+    const popoverStyle = popover.getAttribute('style');
+    expect(popoverStyle).to.include('width: 100px; height: 100px;');
+  });
+
+  it('renders a popover without a popoverRect', async () => {
+    const config = { ...TEST_POPOVER_CONFIG };
+    config.popoverRect = undefined;
+    const plugin = new Plugin({ ...config }, appStore);
+
+    const container = document.createElement('div');
+    render(plugin.render(), container);
+
+    // Wait for next time to let lit process the update
+    await Promise.resolve();
+
+    const popover = container.querySelector('sp-popover');
+    const popoverStyle = popover.getAttribute('style');
+    expect(popoverStyle).to.be.null;
+  });
+
   it('does not render if not pinned', async () => {
     const plugin = new Plugin({
       id: 'test',