manifest viewer modal

src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts

@@ -820,6 +820,7 @@ export default {
 		logout: 'Logout',
 		macro: 'Macro',
 		mandatory: 'Mandatory',
+		manifest: 'Manifest',
 		media: 'Media',
 		message: 'Message',
 		move: 'Move',

src/Umbraco.Web.UI.Client/src/assets/lang/en.ts

@@ -831,6 +831,7 @@ export default {
 		logout: 'Logout',
 		macro: 'Macro',
 		mandatory: 'Mandatory',
+		manifest: 'Manifest',
 		message: 'Message',
 		move: 'Move',
 		name: 'Name',

src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/block-type-custom-view-guide/block-type-custom-view-guide.element.ts

@@ -1,10 +1,15 @@
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { html, customElement, state, property, repeat } from '@umbraco-cms/backoffice/external/lit';
 import { UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property';
-import { umbExtensionsRegistry, type ManifestBlockEditorCustomView } from '@umbraco-cms/backoffice/extension-registry';
+import {
+	UMB_MANIFEST_VIEWER_MODAL,
+	umbExtensionsRegistry,
+	type ManifestBlockEditorCustomView,
+} from '@umbraco-cms/backoffice/extension-registry';
 import { stringOrStringArrayContains } from '@umbraco-cms/backoffice/utils';
 import { UmbExtensionsManifestInitializer } from '@umbraco-cms/backoffice/extension-api';
 import { UmbDocumentTypeDetailRepository } from '@umbraco-cms/backoffice/document-type';
+import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
 
 @customElement('umb-block-type-custom-view-guide')
 export class UmbBlockTypeCustomViewGuideElement extends UmbLitElement {
@@ -77,13 +82,20 @@ export class UmbBlockTypeCustomViewGuideElement extends UmbLitElement {
 		return true;
 	};
 
+	async #viewManifest(manifest: ManifestBlockEditorCustomView) {
+		const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
+		modalManager.open(this, UMB_MANIFEST_VIEWER_MODAL, { data: manifest });
+	}
+
 	override render() {
 		return this._manifests && this._manifests.length > 0
 			? html` <div>
 					${repeat(
 						this._manifests,
 						(x) => x.alias,
-						(x) => html` <umb-ref-manifest standalone .manifest=${x}></umb-ref-manifest> `,
+						(x) => html`
+							<umb-ref-manifest standalone @open=${() => this.#viewManifest(x)} .manifest=${x}></umb-ref-manifest>
+						`,
 					)}
 				</div>`
 			: html`No custom view matches the current block editor type and content type.`;

src/Umbraco.Web.UI.Client/src/packages/core/content-type/modals/composition-picker/index.ts

@@ -1,2 +1 @@
-export * from './composition-picker-modal.element.js';
 export * from './composition-picker-modal.token.js';

src/Umbraco.Web.UI.Client/src/packages/core/content-type/modals/composition-picker/manifest.ts

@@ -0,0 +1,8 @@
+import type { ManifestModal } from '@umbraco-cms/backoffice/extension-registry';
+
+export const manifest: ManifestModal = {
+	type: 'modal',
+	alias: 'Umb.Modal.CompositionPicker',
+	name: 'ContentType Composition Picker Modal',
+	element: () => import('./composition-picker-modal.element.js'),
+};

src/Umbraco.Web.UI.Client/src/packages/core/content-type/modals/manifests.ts

@@ -1,12 +1,3 @@
-import type { ManifestModal } from '@umbraco-cms/backoffice/extension-registry';
+import { manifest } from './composition-picker/manifest.js';
 
-const modals: Array<ManifestModal> = [
-	{
-		type: 'modal',
-		alias: 'Umb.Modal.CompositionPicker',
-		name: 'ContentType Composition Picker Modal',
-		element: () => import('./composition-picker/composition-picker-modal.element.js'),
-	},
-];
-
-export const manifests = modals;
+export const manifests = [manifest];

src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/index.ts

@@ -1,5 +1,6 @@
 export * from './conditions/index.js';
 export * from './initializers/index.js';
+export * from './modals/manifest-viewer/index.js';
 export * from './registry.js';
 export * from './utils/index.js';
 export type * from './interfaces/index.js';

src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/manifests.ts

@@ -3,6 +3,7 @@ import { manifests as menuItemManifests } from './menu-item/manifests.js';
 import { manifests as workspaceManifests } from './workspace/manifests.js';
 import { manifests as collectionManifests } from './collection/manifests.js';
 import { manifests as entityActionManifests } from './entity-actions/manifests.js';
+import { manifest as modalManifest } from './modals/manifest-viewer/manifest.js';
 import type { ManifestTypes } from './models/index.js';
 
 export const manifests: Array<ManifestTypes> = [
@@ -11,4 +12,5 @@ export const manifests: Array<ManifestTypes> = [
 	...workspaceManifests,
 	...collectionManifests,
 	...entityActionManifests,
+	modalManifest,
 ];

src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/modals/manifest-viewer/index.ts

@@ -0,0 +1,2 @@
+export * from './manifest-viewer-modal.token.js';
+export * from './manifest.js';

src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/modals/manifest-viewer/manifest-viewer-modal.element.ts

@@ -0,0 +1,35 @@
+import type { UmbManifestViewerModalData, UmbManifestViewerModalValue } from './manifest-viewer-modal.token.js';
+import { css, html, customElement, nothing } from '@umbraco-cms/backoffice/external/lit';
+import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
+
+@customElement('umb-manifest-viewer-modal')
+export class UmbManifestViewerModalElement extends UmbModalBaseElement<
+	UmbManifestViewerModalData,
+	UmbManifestViewerModalValue
+> {
+	override render() {
+		console.log('data', this.data);
+		return html`
+			<umb-body-layout headline="${this.localize.term('general_manifest')}" main-no-padding>
+				${this.data
+					? html`<umb-code-block language="json" copy style="height:100%; border: none;"
+							>${JSON.stringify(this.data, null, 2)}</umb-code-block
+						>`
+					: nothing}
+				<div slot="actions">
+					<uui-button label=${this.localize.term('general_close')} @click=${this._rejectModal}></uui-button>
+				</div>
+			</umb-body-layout>
+		`;
+	}
+
+	static override styles = [css``];
+}
+
+export default UmbManifestViewerModalElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-manifest-viewer-modal': UmbManifestViewerModalElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/modals/manifest-viewer/manifest-viewer-modal.token.ts

@@ -0,0 +1,16 @@
+import type { ManifestBase } from '@umbraco-cms/backoffice/extension-api';
+import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
+
+export interface UmbManifestViewerModalData extends ManifestBase {}
+
+export type UmbManifestViewerModalValue = undefined;
+
+export const UMB_MANIFEST_VIEWER_MODAL = new UmbModalToken<UmbManifestViewerModalData, UmbManifestViewerModalValue>(
+	'Umb.Modal.ManifestViewer',
+	{
+		modal: {
+			type: 'sidebar',
+			size: 'medium',
+		},
+	},
+);

src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/modals/manifest-viewer/manifest.ts

@@ -0,0 +1,8 @@
+import type { ManifestModal } from '@umbraco-cms/backoffice/extension-registry';
+
+export const manifest: ManifestModal = {
+	type: 'modal',
+	alias: 'Umb.Modal.ManifestViewer',
+	name: 'Manifest Viewer Modal',
+	element: () => import('./manifest-viewer-modal.element.js'),
+};