feat(page-metadata): adding ability to send page metadata to host

apps/ifc-example-client/main.js

@@ -26,7 +26,7 @@ let iframeClient = new Client({
 
 iframeClient.registerCustomElements();
 
-// Add a listener that will handled config data passed from the host to the
+// Add a listener that will handle config data passed from the host to the
 // client at startup.
 iframeClient.addListener('environmentalData', envData => {
   // Transform link URLs to match top-level app.
@@ -75,6 +75,17 @@ document.getElementById('do-publish').addEventListener('click', () => {
 const TOAST_LEVELS = ['info', 'success', 'error'];
 
 document.addEventListener('DOMContentLoaded', () => {
+  let metadata = {
+    title: document.querySelector('h1').innerText,
+    breadcrumbs: [{
+      text: document.querySelector('h1').innerText,
+      href: window.location.href
+    }],
+    custom: undefined
+  }
+
+  iframeClient.sendPageMetadata(metadata);
+
   let toastBtnEl = document.querySelector('button.toast');
   toastBtnEl.addEventListener('click', () => {
     let toast = {

packages/iframe-coordinator-cli/src/App.vue

@@ -3,6 +3,7 @@
     <notifications group="toast" id="toastNotifications" position="top right"></notifications>
     <notifications group="pubsub" id="pubsubEvents" position="top left"></notifications>
     <notifications group="keydown" id="keydownEvents" position="bottom left"></notifications>
+    <notifications group="metadata" id="metadataEvent" position="bottom right"></notifications>
     <router-view/>
   </div>
 </template>

packages/iframe-coordinator-cli/src/views/IframeEmbed.vue

@@ -5,6 +5,10 @@
       <span class="app-route">{{ frameRoute }}</span>
       as
       <span class="frame-url">{{ frameUrl }}</span>
+      <span class="metadata-container">
+        <span class="metadata-title">Page Metadata: </span>
+        <span class="metadata-content">{{ metadata }}</span>
+      </span>
     </div>
     <div v-if="showMenu" id="appMenu">
       <h2>No app is registered for {{ frameRoute }}</h2>
@@ -36,6 +40,7 @@
       v-on:registeredKeyFired="handleKeyEvent"
       v-on:navRequest="handleNav"
       v-on:frameTransition="updateFrameUrl"
+      v-on:pageMetadata="updatePageMetadata"
     ></frame-router>
   </div>
 </template>
@@ -48,7 +53,8 @@ export default {
     return {
       frameUrl: '',
       showMenu: true,
-      clientConfig: {}
+      clientConfig: {},
+      metadata: {}
     };
   },
   methods: {
@@ -98,6 +104,12 @@ export default {
     updateFrameUrl(event) {
       this.frameUrl = event.detail;
       this.showMenu = this.frameUrl === 'about:blank';
+    },
+    updatePageMetadata(event) {
+      this.metadata = {
+        title: event.detail.title,
+        breadcrumbs: event.detail.breadcrumbs
+      }
     }
   },
   mounted() {
@@ -149,10 +161,23 @@ for more details.
   border-bottom: 2px solid #ff4f1f;
 }
 #routerLayout .app-route,
-#routerLayout .frame-url {
+#routerLayout .frame-url,
+#routerLayout .metadata-container .metadata-content {
   color: #ff4f1f;
 }
 
+#routerLayout .metadata-container {
+  display: flex;
+  text-align: left;
+  float: right;
+  width: 800px;
+}
+
+#routerLayout .metadata-container .metadata-title {
+  margin-right: 5px;
+  width: 150px;
+}
+
 #appMenu {
   max-width: 80ch;
   margin: auto;

packages/iframe-coordinator/src/client.ts

@@ -31,6 +31,7 @@ import {
 import { ModalRequest } from './messages/ModalRequest';
 import { NavRequest } from './messages/NavRequest';
 import { Notification } from './messages/Notification';
+import { PageMetadata } from './messages/PageMetadata';
 import { Publication } from './messages/Publication';
 
 // Re-exports for doc visibility
@@ -497,4 +498,20 @@ bad input into one of the iframe-coordinator client methods.
       msg: destination
     });
   }
+
+  /**
+   * Sends page metadata to host for display and browser settings
+   *
+   * title property is for the page title in the browser
+   * breadcrumbs is an array of breadcrumb data for display in host application
+   * custom is any custom data wanting to be sent by client app
+   *
+   * @param metadata data that will be used for display in host application and browser page title
+   */
+  public sendPageMetadata(metadata: PageMetadata): void {
+    this._sendToHost({
+      msgType: 'pageMetadata',
+      msg: metadata
+    });
+  }
 }

packages/iframe-coordinator/src/messages/ClientToHost.ts

@@ -4,6 +4,10 @@ import { LabeledStarted, startedDecoder } from './Lifecycle';
 import { decoder as modalDecoder, LabeledModalRequest } from './ModalRequest';
 import { decoder as navRequestDecoder, LabeledNavRequest } from './NavRequest';
 import { decoder as notifyDecoder, LabeledNotification } from './Notification';
+import {
+  decoder as pageMetadataDecoder,
+  LabeledPageMetadata
+} from './PageMetadata';
 import {
   decoder as publicationDecoder,
   LabeledPublication
@@ -19,7 +23,8 @@ export type ClientToHost =
   | LabeledNavRequest
   | LabeledStarted
   | LabeledKeyDown
-  | LabeledModalRequest;
+  | LabeledModalRequest
+  | LabeledPageMetadata;
 
 /**
  * Validates correctness of messages being sent from
@@ -35,7 +40,8 @@ export function validate(msg: any): ClientToHost {
       navRequest: navRequestDecoder,
       notifyRequest: notifyDecoder,
       toastRequest: notifyDecoder,
-      modalRequest: modalDecoder
+      modalRequest: modalDecoder,
+      pageMetadata: pageMetadataDecoder
     })
   )(msg);
 }

packages/iframe-coordinator/src/messages/PageMetadata.ts

@@ -0,0 +1,60 @@
+import {
+  array,
+  constant,
+  Decoder,
+  mixed,
+  object,
+  optional,
+  string
+} from 'decoders';
+import { labeledDecoder, LabeledMsg } from './LabeledMsg';
+
+/**
+ * The Page metadata
+ */
+export interface PageMetadata {
+  /** Title of the Page for the browser */
+  title: string;
+  /** Breadcrumbs that lead to page */
+  breadcrumbs: Breadcrumb[];
+  /** holder for any custom data client wants to send for page */
+  custom?: any;
+}
+
+/**
+ * Single breadcrumb
+ */
+export interface Breadcrumb {
+  /** UI text for breadcrumb */
+  text: string;
+  /** link href for routing to breadcrumb's page */
+  href: string;
+}
+
+/**
+ * A message used to send metadata of a page
+ * from the clients to the host application.
+ */
+export interface LabeledPageMetadata
+  extends LabeledMsg<'pageMetadata', PageMetadata> {
+  /** Message identifier */
+  msgType: 'pageMetadata';
+  /** Modal request details (type and data) */
+  msg: PageMetadata;
+}
+
+const decoder: Decoder<LabeledPageMetadata> = labeledDecoder(
+  constant<'pageMetadata'>('pageMetadata'),
+  object({
+    title: string,
+    breadcrumbs: array(
+      object({
+        text: string,
+        href: string
+      })
+    ),
+    custom: optional(mixed)
+  })
+);
+
+export { decoder };