feat(admin-ui): Export helper for hosting external ui extensions

packages/admin-ui/src/lib/core/src/public_api.ts

@@ -108,6 +108,7 @@ export * from './shared/components/entity-info/entity-info.component';
 export * from './shared/components/extension-host/extension-host-config';
 export * from './shared/components/extension-host/extension-host.component';
 export * from './shared/components/extension-host/extension-host.service';
+export * from './shared/components/extension-host/host-external-frame';
 export * from './shared/components/facet-value-chip/facet-value-chip.component';
 export * from './shared/components/facet-value-selector/facet-value-selector.component';
 export * from './shared/components/focal-point-control/focal-point-control.component';

packages/admin-ui/src/lib/core/src/shared/components/extension-host/extension-host.component.ts

@@ -13,6 +13,10 @@ import { ActivatedRoute } from '@angular/router';
 import { ExtensionHostConfig } from './extension-host-config';
 import { ExtensionHostService } from './extension-host.service';
 
+/**
+ * This component uses an iframe to embed an external url into the Admin UI, and uses the PostMessage
+ * protocol to allow cross-frame communication between the two frames.
+ */
 @Component({
     selector: 'vdr-extension-host',
     templateUrl: './extension-host.component.html',

packages/admin-ui/src/lib/core/src/shared/components/extension-host/host-external-frame.ts

@@ -0,0 +1,48 @@
+import { Route } from '@angular/router';
+
+import { ExtensionHostConfig, ExtensionHostOptions } from './extension-host-config';
+import { ExtensionHostComponent } from './extension-host.component';
+
+export interface ExternalFrameOptions extends ExtensionHostOptions {
+    path: string;
+    breadcrumbLabel: string;
+}
+
+/**
+ * This function is used to conveniently configure a UI extension route to
+ * host an external URL from the Admin UI using the {@link ExtensionHostComponent}
+ *
+ * @example
+ * ```TypeScript
+ * \@NgModule({
+ *     imports: [
+ *         RouterModule.forChild([
+ *             hostExternalFrame({
+ *                 path: '',
+ *                 breadcrumbLabel: 'Vue.js App',
+ *                 extensionUrl: './assets/vue-app/index.html',
+ *                 openInNewTab: false,
+ *             }),
+ *         ]),
+ *     ],
+ * })
+ export class VueUiExtensionModule {}
+ * ```
+ */
+export function hostExternalFrame(options: ExternalFrameOptions): Route {
+    const pathMatch = options.path === '' ? 'full' : 'prefix';
+    return {
+        path: options.path,
+        pathMatch,
+        component: ExtensionHostComponent,
+        data: {
+            breadcrumb: [
+                {
+                    label: options.breadcrumbLabel,
+                    link: ['./'],
+                },
+            ],
+            extensionHostConfig: new ExtensionHostConfig(options),
+        },
+    };
+}