Feature: Content Workspace Icon (#19292)

* add slot for icon

* expose icon data

* render icon

* load type for scaffold

* rename

* render icon for media

* add observable for content type icon

* request data in data source

* wire up document scaffolding

* remove unused

* export server data source

* render icon for member

* rename data source to align with other detail sources

* rename data source

* remove unused styling

* remove console log

Co-authored-by: Copilot <[email protected]>

* remove console log

Co-authored-by: Copilot <[email protected]>

* remove console log

* Update detail-repository-base.ts

* Update document-workspace-split-view.element.ts

---------

Co-authored-by: Copilot <[email protected]>

Author: madsrasmussen

src/Umbraco.Web.UI.Client/src/packages/core/repository/detail/detail-data-source.interface.ts

@@ -1,5 +1,6 @@
 import type { UmbDataSourceResponse } from '../data-source-response.interface.js';
 import type { UmbReadDetailDataSource } from './read/index.js';
+import type { UmbDeepPartialObject } from '@umbraco-cms/backoffice/utils';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 
 export interface UmbDetailDataSourceConstructor<
@@ -10,7 +11,7 @@ export interface UmbDetailDataSourceConstructor<
 }
 
 export interface UmbDetailDataSource<DetailType> extends UmbReadDetailDataSource<DetailType> {
-	createScaffold(preset?: Partial<DetailType>): Promise<UmbDataSourceResponse<DetailType>>;
+	createScaffold(preset?: UmbDeepPartialObject<DetailType>): Promise<UmbDataSourceResponse<DetailType>>;
 	create(data: DetailType, parentUnique: string | null): Promise<UmbDataSourceResponse<DetailType>>;
 	update(data: DetailType): Promise<UmbDataSourceResponse<DetailType>>;
 	delete(unique: string): Promise<UmbDataSourceResponse<unknown>>;

src/Umbraco.Web.UI.Client/src/packages/core/repository/detail/detail-repository-base.ts

@@ -7,6 +7,7 @@ import type { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import type { UmbDetailStore } from '@umbraco-cms/backoffice/store';
 import type { UmbApi } from '@umbraco-cms/backoffice/extension-api';
 import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity';
+import type { UmbDeepPartialObject } from '@umbraco-cms/backoffice/utils';
 
 export abstract class UmbDetailRepositoryBase<
 		DetailModelType extends UmbEntityModel,
@@ -44,11 +45,13 @@ export abstract class UmbDetailRepositoryBase<
 
 	/**
 	 * Creates a scaffold
-	 * @param {Partial<DetailModelType>} [preset]
+	 * @param {UmbDeepPartialObject<DetailModelType>} [preset]
 	 * @returns {*}
 	 * @memberof UmbDetailRepositoryBase
 	 */
-	async createScaffold(preset?: Partial<DetailModelType>): Promise<UmbRepositoryResponse<DetailModelType>> {
+	async createScaffold(
+		preset?: UmbDeepPartialObject<DetailModelType>,
+	): Promise<UmbRepositoryResponse<DetailModelType>> {
 		return this.detailDataSource.createScaffold(preset);
 	}
 

src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-split-view/workspace-split-view.element.ts

@@ -67,6 +67,7 @@ export class UmbWorkspaceSplitViewElement extends UmbLitElement {
 				back-path=${ifDefined(this.backPath)}
 				.hideNavigation=${!this.displayNavigation}
 				.enforceNoFooter=${true}>
+				<slot id="icon" name="icon" slot="header"></slot>
 				<slot id="header" name="variant-selector" slot="header" @slotchange=${this.#onVariantSelectorSlotChanged}>
 					${when(
 						!this._variantSelectorSlotHasContent,
@@ -106,6 +107,12 @@ export class UmbWorkspaceSplitViewElement extends UmbLitElement {
 				flex: 1 1 auto;
 				display: block;
 			}
+
+			#icon {
+				display: inline-block;
+				font-size: var(--uui-size-6);
+				margin-right: var(--uui-size-space-4);
+			}
 		`,
 	];
 }

src/Umbraco.Web.UI.Client/src/packages/core/workspace/entity-detail/types.ts

@@ -1,4 +1,5 @@
 import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity';
+import type { UmbDeepPartialObject } from '@umbraco-cms/backoffice/utils';
 
 export interface UmbEntityDetailWorkspaceContextArgs {
 	entityType: string;
@@ -13,5 +14,5 @@ export type UmbEntityWorkspaceContextArgs = UmbEntityDetailWorkspaceContextArgs;
 
 export interface UmbEntityDetailWorkspaceContextCreateArgs<DetailModelType> {
 	parent: UmbEntityModel;
-	preset?: Partial<DetailModelType>;
+	preset?: UmbDeepPartialObject<DetailModelType>;
 }

src/Umbraco.Web.UI.Client/src/packages/documents/document-types/repository/detail/index.ts

@@ -1 +1,2 @@
 export { UmbDocumentTypeDetailRepository } from './document-type-detail.repository.js';
+export * from './document-type-detail.server.data-source.js';

src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/detail/document-detail.server.data-source.ts

@@ -7,69 +7,59 @@ import type {
 	UpdateDocumentRequestModel,
 } from '@umbraco-cms/backoffice/external/backend-api';
 import { DocumentService } from '@umbraco-cms/backoffice/external/backend-api';
-import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { tryExecute } from '@umbraco-cms/backoffice/resources';
+import { umbDeepMerge, type UmbDeepPartialObject } from '@umbraco-cms/backoffice/utils';
+import type { UmbReferenceByUnique } from '@umbraco-cms/backoffice/models';
+import { UmbDocumentTypeDetailServerDataSource } from '@umbraco-cms/backoffice/document-type';
+import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
 
 /**
  * A data source for the Document that fetches data from the server
  * @class UmbDocumentServerDataSource
  * @implements {RepositoryDetailDataSource}
  */
-export class UmbDocumentServerDataSource implements UmbDetailDataSource<UmbDocumentDetailModel> {
-	#host: UmbControllerHost;
-
-	/**
-	 * Creates an instance of UmbDocumentServerDataSource.
-	 * @param {UmbControllerHost} host - The controller host for this controller to be appended to
-	 * @memberof UmbDocumentServerDataSource
-	 */
-	constructor(host: UmbControllerHost) {
-		this.#host = host;
-	}
-
+export class UmbDocumentServerDataSource
+	extends UmbControllerBase
+	implements UmbDetailDataSource<UmbDocumentDetailModel>
+{
 	/**
 	 * Creates a new Document scaffold
 	 * @param preset
 	 * @returns { UmbDocumentDetailModel }
 	 * @memberof UmbDocumentServerDataSource
 	 */
-	async createScaffold(preset: Partial<UmbDocumentDetailModel> = {}) {
-		const data: UmbDocumentDetailModel = {
+	async createScaffold(preset: UmbDeepPartialObject<UmbDocumentDetailModel> = {}) {
+		let documentTypeIcon: string | null = null;
+		let documentTypeCollection: UmbReferenceByUnique | null = null;
+
+		const documentTypeUnique = preset.documentType?.unique;
+
+		if (!documentTypeUnique) {
+			throw new Error('Document type unique is missing');
+		}
+
+		const { data } = await new UmbDocumentTypeDetailServerDataSource(this).read(documentTypeUnique);
+		documentTypeIcon = data?.icon ?? null;
+		documentTypeCollection = data?.collection ?? null;
+
+		const defaultData: UmbDocumentDetailModel = {
 			entityType: UMB_DOCUMENT_ENTITY_TYPE,
 			unique: UmbId.new(),
 			template: null,
 			documentType: {
-				unique: '',
-				collection: null,
-				icon: null,
+				unique: documentTypeUnique,
+				collection: documentTypeCollection,
+				icon: documentTypeIcon,
 			},
 			isTrashed: false,
 			values: [],
 			variants: [],
-			...preset,
 		};
 
-		return { data };
-	}
+		const scaffold = umbDeepMerge(defaultData, preset) as UmbDocumentDetailModel;
 
-	/**
-	 * Creates a new variant scaffold.
-	 * @returns A new variant scaffold.
-	 */
-	/*
-	// TDOD: remove if not used
-	createVariantScaffold(): UmbDocumentVariantModel {
-		return {
-			state: null,
-			culture: null,
-			segment: null,
-			name: '',
-			publishDate: null,
-			createDate: null,
-			updateDate: null,
-		};
+		return { data: scaffold };
 	}
-	*/
 
 	/**
 	 * Fetches a Document with the given id from the server
@@ -80,7 +70,7 @@ export class UmbDocumentServerDataSource implements UmbDetailDataSource<UmbDocum
 	async read(unique: string) {
 		if (!unique) throw new Error('Unique is missing');
 
-		const { data, error } = await tryExecute(this.#host, DocumentService.getDocumentById({ path: { id: unique } }));
+		const { data, error } = await tryExecute(this, DocumentService.getDocumentById({ path: { id: unique } }));
 
 		if (error || !data) {
 			return { error };
@@ -147,7 +137,7 @@ export class UmbDocumentServerDataSource implements UmbDetailDataSource<UmbDocum
 		};
 
 		const { data, error } = await tryExecute(
-			this.#host,
+			this,
 			DocumentService.postDocument({
 				body: body,
 			}),
@@ -177,7 +167,7 @@ export class UmbDocumentServerDataSource implements UmbDetailDataSource<UmbDocum
 		};
 
 		const { error } = await tryExecute(
-			this.#host,
+			this,
 			DocumentService.putDocumentById({
 				path: { id: model.unique },
 				body: body,
@@ -199,6 +189,6 @@ export class UmbDocumentServerDataSource implements UmbDetailDataSource<UmbDocum
 	 */
 	async delete(unique: string) {
 		if (!unique) throw new Error('Unique is missing');
-		return tryExecute(this.#host, DocumentService.deleteDocumentById({ path: { id: unique } }));
+		return tryExecute(this, DocumentService.deleteDocumentById({ path: { id: unique } }));
 	}
 }

src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace-split-view.element.ts

@@ -1,6 +1,6 @@
 import { UMB_DOCUMENT_WORKSPACE_CONTEXT } from './document-workspace.context-token.js';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import { css, html, nothing, customElement, state, repeat } from '@umbraco-cms/backoffice/external/lit';
+import { css, html, nothing, customElement, state, repeat, ifDefined } from '@umbraco-cms/backoffice/external/lit';
 import type { ActiveVariant } from '@umbraco-cms/backoffice/workspace';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 
@@ -14,27 +14,36 @@ export class UmbDocumentWorkspaceSplitViewElement extends UmbLitElement {
 	@state()
 	_variants?: Array<ActiveVariant>;
 
+	@state()
+	_icon?: string;
+
 	constructor() {
 		super();
 
 		// TODO: Refactor: use a split view workspace context token: [NL]
 		this.consumeContext(UMB_DOCUMENT_WORKSPACE_CONTEXT, (context) => {
 			this._workspaceContext = context;
-			this._observeActiveVariantInfo();
+			this.#observeActiveVariantInfo();
+			this.#observeIcon();
 		});
 	}
 
-	private _observeActiveVariantInfo() {
-		if (!this._workspaceContext) return;
+	#observeActiveVariantInfo() {
 		this.observe(
-			this._workspaceContext.splitView.activeVariantsInfo,
+			this._workspaceContext?.splitView.activeVariantsInfo,
 			(variants) => {
 				this._variants = variants;
 			},
 			'_observeActiveVariantsInfo',
 		);
 	}
 
+	#observeIcon() {
+		this.observe(this._workspaceContext?.contentTypeIcon, (icon) => {
+			this._icon = icon ?? undefined;
+		});
+	}
+
 	override render() {
 		return this._variants
 			? html`<div id="splitViews">
@@ -46,6 +55,7 @@ export class UmbDocumentWorkspaceSplitViewElement extends UmbLitElement {
 								<umb-workspace-split-view
 									.splitViewIndex=${view.index}
 									.displayNavigation=${view.index === this._variants!.length - 1}>
+									<umb-icon slot="icon" name=${ifDefined(this._icon)}></umb-icon>
 									<umb-document-workspace-split-view-variant-selector
 										slot="variant-selector"></umb-document-workspace-split-view-variant-selector>
 								</umb-workspace-split-view>

src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace.context.ts

@@ -67,6 +67,8 @@ export class UmbDocumentWorkspaceContext
 	readonly contentTypeHasCollection = this._data.createObservablePartOfCurrent(
 		(data) => !!data?.documentType.collection,
 	);
+	readonly contentTypeIcon = this._data.createObservablePartOfCurrent((data) => data?.documentType.icon || null);
+
 	readonly templateId = this._data.createObservablePartOfCurrent((data) => data?.template?.unique || null);
 
 	#isTrashedContext = new UmbIsTrashedEntityContext(this);
@@ -303,7 +305,6 @@ export class UmbDocumentWorkspaceContext
 			preset: {
 				documentType: {
 					unique: documentTypeUnique,
-					collection: null,
 				},
 			},
 		});

src/Umbraco.Web.UI.Client/src/packages/media/media-types/repository/detail/index.ts

@@ -1 +1,2 @@
 export { UmbMediaTypeDetailRepository } from './media-type-detail.repository.js';
+export * from './media-type-detail.server.data-source.js';

src/Umbraco.Web.UI.Client/src/packages/media/media-types/repository/detail/media-type-detail.repository.ts

@@ -1,11 +1,11 @@
 import type { UmbMediaTypeDetailModel } from '../../types.js';
-import { UmbMediaTypeServerDataSource } from './media-type-detail.server.data-source.js';
+import { UmbMediaTypeDetailServerDataSource } from './media-type-detail.server.data-source.js';
 import { UMB_MEDIA_TYPE_DETAIL_STORE_CONTEXT } from './media-type-detail.store.context-token.js';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { UmbDetailRepositoryBase } from '@umbraco-cms/backoffice/repository';
 export class UmbMediaTypeDetailRepository extends UmbDetailRepositoryBase<UmbMediaTypeDetailModel> {
 	constructor(host: UmbControllerHost) {
-		super(host, UmbMediaTypeServerDataSource, UMB_MEDIA_TYPE_DETAIL_STORE_CONTEXT);
+		super(host, UmbMediaTypeDetailServerDataSource, UMB_MEDIA_TYPE_DETAIL_STORE_CONTEXT);
 	}
 }