Feature: Media types import/export

src/packages/media/media-types/entity-actions/export/manifests.ts

@@ -0,0 +1,20 @@
+import { UMB_MEDIA_TYPE_ENTITY_TYPE } from '../../entity.js';
+import { manifests as repositoryManifests } from './repository/manifests.js';
+import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry';
+
+const entityActions: Array<ManifestTypes> = [
+	{
+		type: 'entityAction',
+		kind: 'default',
+		alias: 'Umb.EntityAction.MediaType.Export',
+		name: 'Export Media Type Entity Action',
+		forEntityTypes: [UMB_MEDIA_TYPE_ENTITY_TYPE],
+		api: () => import('./media-type-export.action.js'),
+		meta: {
+			icon: 'icon-download-alt',
+			label: '#actions_export',
+		},
+	},
+];
+
+export const manifests: Array<ManifestTypes> = [...entityActions, ...repositoryManifests];

src/packages/media/media-types/entity-actions/export/media-type-export.action.ts

@@ -0,0 +1,18 @@
+import { UmbExportMediaTypeRepository } from './repository/index.js';
+import { blobDownload } from '@umbraco-cms/backoffice/utils';
+import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action';
+
+export class UmbExportMediaTypeEntityAction extends UmbEntityActionBase<object> {
+	#repository = new UmbExportMediaTypeRepository(this);
+
+	override async execute() {
+		if (!this.args.unique) throw new Error('Unique is not available');
+
+		const { data } = await this.#repository.requestExport(this.args.unique);
+		if (!data) return;
+
+		blobDownload(data, `${this.args.unique}.udt`, 'text/xml');
+	}
+}
+
+export default UmbExportMediaTypeEntityAction;

src/packages/media/media-types/entity-actions/export/repository/constants.ts

@@ -0,0 +1 @@
+export const UMB_EXPORT_MEDIA_TYPE_REPOSITORY_ALIAS = 'Umb.Repository.MediaType.Export';

src/packages/media/media-types/entity-actions/export/repository/index.ts

@@ -0,0 +1,2 @@
+export { UmbExportMediaTypeRepository } from './media-type-export.repository.js';
+export { UMB_EXPORT_MEDIA_TYPE_REPOSITORY_ALIAS } from './constants.js';

src/packages/media/media-types/entity-actions/export/repository/manifests.ts

@@ -0,0 +1,11 @@
+import { UMB_EXPORT_MEDIA_TYPE_REPOSITORY_ALIAS } from './constants.js';
+import type { ManifestRepository, ManifestTypes } from '@umbraco-cms/backoffice/extension-registry';
+
+const exportRepository: ManifestRepository = {
+	type: 'repository',
+	alias: UMB_EXPORT_MEDIA_TYPE_REPOSITORY_ALIAS,
+	name: 'Export Media Type Repository',
+	api: () => import('./media-type-export.repository.js'),
+};
+
+export const manifests: Array<ManifestTypes> = [exportRepository];

src/packages/media/media-types/entity-actions/export/repository/media-type-export.repository.ts

@@ -0,0 +1,21 @@
+import { UmbExportMediaTypeServerDataSource } from './media-type-export.server.data-source.js';
+import { UMB_NOTIFICATION_CONTEXT } from '@umbraco-cms/backoffice/notification';
+import { UmbRepositoryBase } from '@umbraco-cms/backoffice/repository';
+
+export class UmbExportMediaTypeRepository extends UmbRepositoryBase {
+	#exportSource = new UmbExportMediaTypeServerDataSource(this);
+
+	async requestExport(unique: string) {
+		const { data, error } = await this.#exportSource.export(unique);
+
+		if (!error) {
+			const notificationContext = await this.getContext(UMB_NOTIFICATION_CONTEXT);
+			const notification = { data: { message: `Exported` } };
+			notificationContext.peek('positive', notification);
+		}
+
+		return { data, error };
+	}
+}
+
+export { UmbExportMediaTypeRepository as api };

src/packages/media/media-types/entity-actions/export/repository/media-type-export.server.data-source.ts

@@ -0,0 +1,33 @@
+import { MediaTypeService } from '@umbraco-cms/backoffice/external/backend-api';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
+
+/**
+ * Export Media Server Data Source
+ * @export
+ * @class UmbExportMediaTypeServerDataSource
+ */
+export class UmbExportMediaTypeServerDataSource {
+	#host: UmbControllerHost;
+
+	/**
+	 * Creates an instance of UmbExportMediaTypeServerDataSource.
+	 * @param {UmbControllerHost} host
+	 * @memberof UmbExportMediaTypeServerDataSource
+	 */
+	constructor(host: UmbControllerHost) {
+		this.#host = host;
+	}
+
+	/**
+	 * Export an item for the given id to the destination unique
+	 * @param {unique} unique
+	 * @returns {*}
+	 * @memberof UmbExportMediaTypeServerDataSource
+	 */
+	async export(unique: string) {
+		if (!unique) throw new Error('Unique is missing');
+
+		return tryExecuteAndNotify(this.#host, MediaTypeService.getMediaTypeByIdExport({ id: unique }));
+	}
+}

src/packages/media/media-types/entity-actions/import/manifests.ts

@@ -0,0 +1,21 @@
+import { UMB_MEDIA_TYPE_ROOT_ENTITY_TYPE } from '../../entity.js';
+import { manifests as repositoryManifests } from './repository/manifests.js';
+import { manifests as modalManifests } from './modal/manifests.js';
+import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry';
+
+const entityActions: Array<ManifestTypes> = [
+	{
+		type: 'entityAction',
+		kind: 'default',
+		alias: 'Umb.EntityAction.MediaType.Import',
+		name: 'Export Media Type Entity Action',
+		forEntityTypes: [UMB_MEDIA_TYPE_ROOT_ENTITY_TYPE],
+		api: () => import('./media-type-import.action.js'),
+		meta: {
+			icon: 'icon-page-up',
+			label: '#actions_import',
+		},
+	},
+];
+
+export const manifests: Array<ManifestTypes> = [...entityActions, ...repositoryManifests, ...modalManifests];

src/packages/media/media-types/entity-actions/import/media-type-import.action.ts

@@ -0,0 +1,24 @@
+import { UMB_MEDIA_TYPE_IMPORT_MODAL } from './modal/media-type-import-modal.token.js';
+import { UMB_ACTION_EVENT_CONTEXT } from '@umbraco-cms/backoffice/action';
+import { UmbEntityActionBase, UmbRequestReloadChildrenOfEntityEvent } from '@umbraco-cms/backoffice/entity-action';
+import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
+
+export class UmbImportMediaTypeEntityAction extends UmbEntityActionBase<object> {
+	override async execute() {
+		const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
+		const modalContext = modalManager.open(this, UMB_MEDIA_TYPE_IMPORT_MODAL, {
+			data: { unique: this.args.unique },
+		});
+		await modalContext.onSubmit().catch(() => {});
+
+		const actionEventContext = await this.getContext(UMB_ACTION_EVENT_CONTEXT);
+		const event = new UmbRequestReloadChildrenOfEntityEvent({
+			unique: this.args.unique,
+			entityType: this.args.entityType,
+		});
+
+		actionEventContext.dispatchEvent(event);
+	}
+}
+
+export default UmbImportMediaTypeEntityAction;

src/packages/media/media-types/entity-actions/import/modal/index.ts

@@ -0,0 +1 @@
+export * from './media-type-import-modal.token.js';

src/packages/media/media-types/entity-actions/import/modal/manifests.ts

@@ -0,0 +1,10 @@
+import type { ManifestModal } from '@umbraco-cms/backoffice/extension-registry';
+
+export const manifests: Array<ManifestModal> = [
+	{
+		type: 'modal',
+		alias: 'Umb.Modal.MediaType.Import',
+		name: 'Media Type Import Modal',
+		element: () => import('./media-type-import-modal.element.js'),
+	},
+];

src/packages/media/media-types/entity-actions/import/modal/media-type-import-modal.element.ts

@@ -0,0 +1,166 @@
+import { UmbMediaTypeImportRepository } from '../repository/media-type-import.repository.js';
+import type { UmbMediaTypeImportModalData, UmbMediaTypeImportModalValue } from './media-type-import-modal.token.js';
+import { css, html, customElement, query, state, when } from '@umbraco-cms/backoffice/external/lit';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
+import type { UmbDropzoneElement } from '@umbraco-cms/backoffice/media';
+
+interface UmbMediaTypePreview {
+	unique: string;
+	name: string;
+	alias: string;
+	icon: string;
+}
+
+@customElement('umb-media-type-import-modal')
+export class UmbMediaTypeImportModalLayout extends UmbModalBaseElement<
+	UmbMediaTypeImportModalData,
+	UmbMediaTypeImportModalValue
+> {
+	#MediaTypeImportRepository = new UmbMediaTypeImportRepository(this);
+	#temporaryUnique?: string;
+	#fileReader;
+
+	@state()
+	private _fileContent: Array<UmbMediaTypePreview> = [];
+
+	@query('#dropzone')
+	private dropzone?: UmbDropzoneElement;
+
+	constructor() {
+		super();
+		this.#fileReader = new FileReader();
+		this.#fileReader.onload = (e) => {
+			if (typeof e.target?.result === 'string') {
+				const fileContent = e.target.result;
+				this.#MediaTypePreviewBuilder(fileContent);
+			} else {
+				this.#requestReset();
+			}
+		};
+	}
+
+	#onFileDropped() {
+		const data = this.dropzone?.getFiles()[0];
+		if (!data) return;
+
+		this.#temporaryUnique = data.temporaryUnique;
+		this.#fileReader.readAsText(data.file);
+	}
+
+	async #onFileImport() {
+		if (!this.#temporaryUnique) return;
+		const { error } = await this.#MediaTypeImportRepository.requestImport(this.#temporaryUnique);
+		if (error) return;
+		this._submitModal();
+	}
+
+	#MediaTypePreviewBuilder(htmlString: string) {
+		const parser = new DOMParser();
+		const doc = parser.parseFromString(htmlString, 'text/xml');
+		const childNodes = doc.childNodes;
+
+		const elements: Array<Element> = [];
+
+		childNodes.forEach((node) => {
+			if (node.nodeType === Node.ELEMENT_NODE && node.nodeName === 'MediaType') {
+				elements.push(node as Element);
+			}
+		});
+
+		this._fileContent = this.#MediaTypePreviewItemBuilder(elements);
+	}
+
+	#MediaTypePreviewItemBuilder(elements: Array<Element>) {
+		const mediaTypes: Array<UmbMediaTypePreview> = [];
+		elements.forEach((MediaType) => {
+			const info = MediaType.getElementsByTagName('Info')[0];
+			const unique = info.getElementsByTagName('Key')[0].textContent ?? '';
+			const name = info.getElementsByTagName('Name')[0].textContent ?? '';
+			const alias = info.getElementsByTagName('Alias')[0].textContent ?? '';
+			const icon = info.getElementsByTagName('Icon')[0].textContent ?? '';
+
+			mediaTypes.push({ unique, name, alias, icon });
+		});
+		return mediaTypes;
+	}
+
+	#requestReset() {
+		this._fileContent = [];
+		this.#temporaryUnique = undefined;
+	}
+
+	async #onBrowse() {
+		this.dropzone?.browse();
+	}
+
+	override render() {
+		return html` <umb-body-layout headline=${this.localize.term('general_import')}>
+			<uui-box> ${this.#renderUploadZone()} </uui-box>
+			<uui-button
+				slot="actions"
+				type="button"
+				label=${this.localize.term('general_cancel')}
+				@click=${this._rejectModal}></uui-button>
+			<uui-button
+				slot="actions"
+				type="button"
+				look="primary"
+				?disabled=${!this.#temporaryUnique}
+				label=${this.localize.term('actions_import')}
+				@click=${this.#onFileImport}></uui-button>
+		</umb-body-layout>`;
+	}
+
+	#renderUploadZone() {
+		return html`
+			${when(
+				this._fileContent.length,
+				() =>
+					html`<uui-ref-node name=${this._fileContent[0].name} alias=${this._fileContent[0].alias} readonly standalone>
+						<umb-icon slot="icon" name=${this._fileContent[0].icon}></umb-icon>
+						<uui-button
+							slot="actions"
+							@click=${this.#requestReset}
+							label=${this.localize.term('general_remove')}></uui-button>
+					</uui-ref-node>`,
+				() =>
+					/**TODO Add localizations */
+					html`<div id="wrapper">
+						Drag and drop your file here
+						<uui-button look="primary" label="or click here to choose a file" @click=${this.#onBrowse}></uui-button>
+						<umb-dropzone id="dropzone" createAsTemporary @change=${this.#onFileDropped}> </umb-dropzone>
+					</div>`,
+			)}
+		`;
+	}
+
+	static override styles = [
+		UmbTextStyles,
+		css`
+			#wrapper {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				text-align: center;
+				position: relative;
+				gap: var(--uui-size-space-3);
+				border: 2px dashed var(--uui-color-divider-standalone);
+				background-color: var(--uui-color-surface-alt);
+				padding: var(--uui-size-space-6);
+			}
+
+			#import {
+				margin-top: var(--uui-size-space-6);
+			}
+		`,
+	];
+}
+
+export default UmbMediaTypeImportModalLayout;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-media-type-import-modal': UmbMediaTypeImportModalLayout;
+	}
+}

src/packages/media/media-types/entity-actions/import/modal/media-type-import-modal.token.ts

@@ -0,0 +1,17 @@
+import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
+
+export interface UmbMediaTypeImportModalData {
+	unique: string | null;
+}
+
+export interface UmbMediaTypeImportModalValue {}
+
+export const UMB_MEDIA_TYPE_IMPORT_MODAL = new UmbModalToken<UmbMediaTypeImportModalData, UmbMediaTypeImportModalValue>(
+	'Umb.Modal.MediaType.Import',
+	{
+		modal: {
+			type: 'sidebar',
+			size: 'small',
+		},
+	},
+);

src/packages/media/media-types/entity-actions/import/repository/constants.ts

@@ -0,0 +1 @@
+export const UMB_MEDIA_TYPE_IMPORT_REPOSITORY_ALIAS = 'Umb.Repository.MediaType.Import';

src/packages/media/media-types/entity-actions/import/repository/index.ts

@@ -0,0 +1,2 @@
+export { UmbMediaTypeImportRepository } from './media-type-import.repository.js';
+export { UMB_MEDIA_TYPE_IMPORT_REPOSITORY_ALIAS } from './constants.js';

src/packages/media/media-types/entity-actions/import/repository/manifests.ts

@@ -0,0 +1,11 @@
+import { UMB_MEDIA_TYPE_IMPORT_REPOSITORY_ALIAS } from './constants.js';
+import type { ManifestRepository, ManifestTypes } from '@umbraco-cms/backoffice/extension-registry';
+
+const importRepository: ManifestRepository = {
+	type: 'repository',
+	alias: UMB_MEDIA_TYPE_IMPORT_REPOSITORY_ALIAS,
+	name: 'Import Media Type Repository',
+	api: () => import('./media-type-import.repository.js'),
+};
+
+export const manifests: Array<ManifestTypes> = [importRepository];

src/packages/media/media-types/entity-actions/import/repository/media-type-import.repository.ts

@@ -0,0 +1,21 @@
+import { UmbMediaTypeImportServerDataSource } from './media-type-import.server.data-source.js';
+import { UMB_NOTIFICATION_CONTEXT } from '@umbraco-cms/backoffice/notification';
+import { UmbRepositoryBase } from '@umbraco-cms/backoffice/repository';
+
+export class UmbMediaTypeImportRepository extends UmbRepositoryBase {
+	#importSource = new UmbMediaTypeImportServerDataSource(this);
+
+	async requestImport(temporaryUnique: string) {
+		const { data, error } = await this.#importSource.import(temporaryUnique);
+
+		if (!error) {
+			const notificationContext = await this.getContext(UMB_NOTIFICATION_CONTEXT);
+			const notification = { data: { message: `Imported` } };
+			notificationContext.peek('positive', notification);
+		}
+
+		return { data, error };
+	}
+}
+
+export { UmbMediaTypeImportRepository as api };