Skip to content

Commit

Permalink
feat(admin-ui): Export helper for hosting external ui extensions
Browse files Browse the repository at this point in the history
  • Loading branch information
michaelbromley committed Mar 16, 2020
1 parent 99073c9 commit 3d08460
Show file tree
Hide file tree
Showing 3 changed files with 53 additions and 0 deletions.
1 change: 1 addition & 0 deletions packages/admin-ui/src/lib/core/src/public_api.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
Original file line number Diff line number Diff line change
@@ -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),
},
};
}

0 comments on commit 3d08460

Please sign in to comment.