Merge branch 'main' into v14/bugfix/document-public-access-cancelled-server-requests

src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts

@@ -58,28 +58,31 @@ export abstract class UmbMenuTreeStructureWorkspaceContextBase extends UmbContex
 		}
 
 		const isNew = this.#workspaceContext?.getIsNew();
-		const uniqueObservable = isNew ? this.#workspaceContext?.parentUnique : this.#workspaceContext?.unique;
+
 		const entityTypeObservable = isNew ? this.#workspaceContext?.parentEntityType : this.#workspaceContext?.entityType;
-
-		const unique = (await this.observe(uniqueObservable, () => {})?.asPromise()) as string;
-		if (!unique) throw new Error('Unique is not available');
-
 		const entityType = (await this.observe(entityTypeObservable, () => {})?.asPromise()) as string;
 		if (!entityType) throw new Error('Entity type is not available');
 
-		const { data } = await treeRepository.requestTreeItemAncestors({ treeItem: { unique, entityType } });
+		// If the entity type is different from the root entity type, then we can request the ancestors.
+		if (entityType !== root?.entityType) {
+			const uniqueObservable = isNew ? this.#workspaceContext?.parentUnique : this.#workspaceContext?.unique;
+			const unique = (await this.observe(uniqueObservable, () => {})?.asPromise()) as string;
+			if (!unique) throw new Error('Unique is not available');
 
-		if (data) {
-			const ancestorItems = data.map((treeItem) => {
-				return {
-					unique: treeItem.unique,
-					entityType: treeItem.entityType,
-					name: treeItem.name,
-					isFolder: treeItem.isFolder,
-				};
-			});
+			const { data } = await treeRepository.requestTreeItemAncestors({ treeItem: { unique, entityType } });
 
-			structureItems.push(...ancestorItems);
+			if (data) {
+				const ancestorItems = data.map((treeItem) => {
+					return {
+						unique: treeItem.unique,
+						entityType: treeItem.entityType,
+						name: treeItem.name,
+						isFolder: treeItem.isFolder,
+					};
+				});
+
+				structureItems.push(...ancestorItems);
+			}
 		}
 
 		const parent = structureItems[structureItems.length - 2];

src/Umbraco.Web.UI.Client/src/packages/media/media/collection/media-collection.element.ts

@@ -1,3 +1,5 @@
+import { UMB_MEDIA_ENTITY_TYPE, UMB_MEDIA_ROOT_ENTITY_TYPE } from '../entity.js';
+import { UMB_MEDIA_WORKSPACE_CONTEXT } from '../workspace/media-workspace.context-token.js';
 import type { UmbMediaCollectionContext } from './media-collection.context.js';
 import { UMB_MEDIA_COLLECTION_CONTEXT } from './media-collection.context-token.js';
 import { customElement, html, state, when } from '@umbraco-cms/backoffice/external/lit';
@@ -5,6 +7,8 @@ import { UmbCollectionDefaultElement } from '@umbraco-cms/backoffice/collection'
 import type { UmbProgressEvent } from '@umbraco-cms/backoffice/event';
 
 import './media-collection-toolbar.element.js';
+import { UMB_ACTION_EVENT_CONTEXT } from '@umbraco-cms/backoffice/action';
+import { UmbRequestReloadChildrenOfEntityEvent } from '@umbraco-cms/backoffice/entity-action';
 
 @customElement('umb-media-collection')
 export class UmbMediaCollectionElement extends UmbCollectionDefaultElement {
@@ -13,16 +17,31 @@ export class UmbMediaCollectionElement extends UmbCollectionDefaultElement {
 	@state()
 	private _progress = -1;
 
+	@state()
+	private _unique: string | null = null;
+
 	constructor() {
 		super();
 		this.consumeContext(UMB_MEDIA_COLLECTION_CONTEXT, (instance) => {
 			this.#mediaCollection = instance;
 		});
+		this.consumeContext(UMB_MEDIA_WORKSPACE_CONTEXT, (instance) => {
+			this.observe(instance.unique, (unique) => {
+				this._unique = unique ?? null;
+			});
+		});
 	}
 
-	#onChange() {
+	async #onChange() {
 		this._progress = -1;
 		this.#mediaCollection?.requestCollection();
+
+		const eventContext = await this.getContext(UMB_ACTION_EVENT_CONTEXT);
+		const event = new UmbRequestReloadChildrenOfEntityEvent({
+			entityType: this._unique ? UMB_MEDIA_ENTITY_TYPE : UMB_MEDIA_ROOT_ENTITY_TYPE,
+			unique: this._unique,
+		});
+		eventContext.dispatchEvent(event);
 	}
 
 	#onProgress(event: UmbProgressEvent) {
@@ -33,7 +52,10 @@ export class UmbMediaCollectionElement extends UmbCollectionDefaultElement {
 		return html`
 			<umb-media-collection-toolbar slot="header"></umb-media-collection-toolbar>
 			${when(this._progress >= 0, () => html`<uui-loader-bar progress=${this._progress}></uui-loader-bar>`)}
-			<umb-dropzone @change=${this.#onChange} @progress=${this.#onProgress}></umb-dropzone>
+			<umb-dropzone
+				.parentUnique=${this._unique}
+				@change=${this.#onChange}
+				@progress=${this.#onProgress}></umb-dropzone>
 		`;
 	}
 }

src/Umbraco.Web.UI.Client/src/packages/media/media/dropzone/dropzone-manager.class.ts

@@ -187,8 +187,15 @@ export class UmbDropzoneManager extends UmbControllerBase {
 		fileExtensions: Array<string>,
 		parentUnique: string | null,
 	): Promise<Array<UmbUploadableExtensionModel>> {
-		// Getting all media types allowed in our current position based on parent unique.
-		const { data: allAllowedMediaTypes } = await this.#mediaTypeStructure.requestAllowedChildrenOf(parentUnique);
+		let parentMediaType: string | null = null;
+		if (parentUnique) {
+			const { data } = await this.#mediaDetailRepository.requestByUnique(parentUnique);
+			parentMediaType = data?.mediaType.unique ?? null;
+		}
+
+		// Getting all media types allowed in our current position based on parent's media type.
+
+		const { data: allAllowedMediaTypes } = await this.#mediaTypeStructure.requestAllowedChildrenOf(parentMediaType);
 		if (!allAllowedMediaTypes?.items.length) return [];
 
 		const allowedByParent = allAllowedMediaTypes.items;

src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/components/stylesheet-rule-input/stylesheet-rule-settings-modal.element.ts

@@ -75,7 +75,7 @@ export default class UmbStylesheetRuleSettingsModalElement extends UmbModalBaseE
 									</uui-input>
 								</uui-form-layout-item>
 								<uui-form-layout-item>
-									<uui-label for="styles" slot="label" required="">Styles</uui-label>
+									<uui-label for="styles" slot="label">Styles</uui-label>
 									<span slot="description"
 										>The CSS that should be applied in the rich text editor, e.g. "color:red;"</span
 									>
@@ -88,7 +88,7 @@ export default class UmbStylesheetRuleSettingsModalElement extends UmbModalBaseE
 									</uui-textarea>
 								</uui-form-layout-item>
 								<uui-form-layout-item>
-									<uui-label for="styles" slot="label" required="">Preview</uui-label>
+									<uui-label for="styles" slot="label">Preview</uui-label>
 									<span slot="description">How the text will look like in the rich text editor.</span>
 									<div style="${ifDefined(this.value.rule?.styles)}">
 										a b c d e f g h i j k l m n o p q r s t u v w x t z

src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/utils/stylesheet-rule-manager.ts

@@ -43,7 +43,7 @@ export class UmbStylesheetRuleManager {
 					(rule) => `
 /**umb_name:${rule.name}*/
 ${rule.selector} {
-	${rule.styles}
+	${rule.styles ?? ''}
 }
 `,
 				)