@umbraco-cms/backoffice 17.5.3 → 17.6.0-rc

package/dist-cms/packages/media/media/entity-bulk-actions/move-to/manifests.js

@@ -2,6 +2,7 @@ import { UMB_MEDIA_COLLECTION_ALIAS, UMB_MEDIA_TREE_ALIAS } from '../../constant
 import { UMB_MEDIA_ENTITY_TYPE } from '../../entity.js';
 import { UMB_BULK_MOVE_MEDIA_REPOSITORY_ALIAS } from './constants.js';
 import { manifests as repositoryManifests } from './repository/manifests.js';
+import { UMB_MEDIA_SEARCH_PROVIDER_ALIAS } from '../../search/constants.js';
 import { UMB_COLLECTION_ALIAS_CONDITION } from '../../../../core/collection/index.js';
 const bulkMoveAction = {
     type: 'entityBulkAction',
@@ -13,6 +14,7 @@ const bulkMoveAction = {
     meta: {
         bulkMoveRepositoryAlias: UMB_BULK_MOVE_MEDIA_REPOSITORY_ALIAS,
         treeAlias: UMB_MEDIA_TREE_ALIAS,
+        searchProviderAlias: UMB_MEDIA_SEARCH_PROVIDER_ALIAS,
     },
     conditions: [
         {

package/dist-cms/packages/media/media/global-contexts/media-configuration.context.d.ts

@@ -1,8 +1,8 @@
+import type { UmbMediaConfigurationModel } from '../configuration/types.js';
 import { UmbContextBase } from '../../../../libs/class-api/index.js';
 import { UmbContextToken } from '../../../../libs/context-api/index.js';
 import type { UmbControllerHost } from '../../../../libs/controller-api/index.js';
 import type { UmbApi } from '../../../../libs/extension-api/index.js';
-import { type MediaConfigurationResponseModel } from '../../../core/backend-api/index.js';
 /**
  * A context for fetching and caching the media configuration.
  * @internal
@@ -12,9 +12,9 @@ export declare class UmbMediaConfigurationContext extends UmbContextBase impleme
     constructor(host: UmbControllerHost);
     /**
      * Get the media configuration from the server, or return the cached configuration if it has already been fetched.
-     * @returns A promise that resolves to the media configuration, or null if the configuration could not be fetched.
+     * @returns {Promise<UmbMediaConfigurationModel | null>} A promise that resolves to the media configuration, or null if the configuration could not be fetched.
      */
-    getMediaConfiguration(): Promise<MediaConfigurationResponseModel | null>;
+    getMediaConfiguration(): Promise<UmbMediaConfigurationModel | null>;
 }
 export default UmbMediaConfigurationContext;
 /**

package/dist-cms/packages/media/media/global-contexts/media-configuration.context.js

@@ -1,32 +1,21 @@
+import { UmbMediaConfigurationRepository } from '../configuration/index.js';
 import { UmbContextBase } from '../../../../libs/class-api/index.js';
 import { UmbContextToken } from '../../../../libs/context-api/index.js';
-import { MediaService } from '../../../core/backend-api/index.js';
-import { tryExecute } from '../../../core/resources/index.js';
 /**
  * A context for fetching and caching the media configuration.
  * @internal
  */
 export class UmbMediaConfigurationContext extends UmbContextBase {
-    /**
-     * The cached media configuration.
-     */
-    static #mediaConfiguration;
+    #repository = new UmbMediaConfigurationRepository(this);
     constructor(host) {
         super(host, UMB_MEDIA_CONFIGURATION_CONTEXT);
     }
     /**
      * Get the media configuration from the server, or return the cached configuration if it has already been fetched.
-     * @returns A promise that resolves to the media configuration, or null if the configuration could not be fetched.
-     */
-    getMediaConfiguration() {
-        return (UmbMediaConfigurationContext.#mediaConfiguration ??= this.#fetchMediaConfiguration());
-    }
-    /**
-     * Fetch the media configuration from the server.
-     * @returns A promise that resolves to the media configuration, or null if the configuration could not be fetched.
+     * @returns {Promise<UmbMediaConfigurationModel | null>} A promise that resolves to the media configuration, or null if the configuration could not be fetched.
      */
-    async #fetchMediaConfiguration() {
-        const { data } = await tryExecute(this, MediaService.getMediaConfiguration());
+    async getMediaConfiguration() {
+        const { data } = await this.#repository.requestConfiguration();
         return data ?? null;
     }
 }

package/dist-cms/packages/media/media/index.d.ts

@@ -4,6 +4,7 @@ export * from './constants.js';
 export * from './user-start-node/value-type/constants.js';
 export * from './dropzone/index.js';
 export * from './global-contexts/index.js';
+export * from './item/index.js';
 export * from './modals/index.js';
 export * from './recycle-bin/index.js';
 export * from './reference/index.js';
@@ -11,4 +12,5 @@ export * from './repository/index.js';
 export * from './search/index.js';
 export * from './tree/index.js';
 export * from './url/index.js';
+export * from './utils/index.js';
 export type * from './types.js';

package/dist-cms/packages/media/media/index.js

@@ -4,6 +4,7 @@ export * from './constants.js';
 export * from './user-start-node/value-type/constants.js';
 export * from './dropzone/index.js';
 export * from './global-contexts/index.js';
+export * from './item/index.js';
 export * from './modals/index.js';
 export * from './recycle-bin/index.js';
 export * from './reference/index.js';
@@ -11,3 +12,4 @@ export * from './repository/index.js';
 export * from './search/index.js';
 export * from './tree/index.js';
 export * from './url/index.js';
+export * from './utils/index.js';

package/dist-cms/packages/media/media/item/index.d.ts

@@ -0,0 +1 @@
+export * from './media-item-data-resolver.js';

package/dist-cms/packages/media/media/item/index.js

@@ -0,0 +1 @@
+export * from './media-item-data-resolver.js';

package/dist-cms/packages/media/media/item/media-item-data-resolver.d.ts

@@ -0,0 +1,56 @@
+import type { UmbMediaItemModel } from '../types.js';
+import { UmbControllerBase } from '../../../../libs/class-api/index.js';
+import type { UmbControllerHost } from '../../../../libs/controller-api/index.js';
+import type { UmbItemDataResolver } from '../../../core/entity-item/index.js';
+type UmbMediaItemDataResolverModel = Omit<UmbMediaItemModel, 'parent' | 'hasChildren'>;
+/**
+ * A controller for resolving data for a media item
+ * @exports
+ * @class UmbMediaItemDataResolver
+ * @augments {UmbControllerBase}
+ */
+export declare class UmbMediaItemDataResolver<MediaItemModel extends UmbMediaItemDataResolverModel> extends UmbControllerBase implements UmbItemDataResolver {
+    #private;
+    readonly entityType: import("rxjs").Observable<"media" | undefined>;
+    readonly unique: import("rxjs").Observable<string | undefined>;
+    readonly icon: import("rxjs").Observable<string | undefined>;
+    readonly name: import("rxjs").Observable<string | undefined>;
+    constructor(host: UmbControllerHost);
+    /**
+     * Get the current item
+     * @returns {MediaItemModel | undefined} The current item
+     * @memberof UmbMediaItemDataResolver
+     */
+    getData(): MediaItemModel | undefined;
+    /**
+     * Set the current item
+     * @param {MediaItemModel | undefined} data The current item
+     * @memberof UmbMediaItemDataResolver
+     */
+    setData(data: MediaItemModel | undefined): void;
+    /**
+     * Get the entity type of the item
+     * @returns {Promise<string | undefined>} The entity type of the item
+     * @memberof UmbMediaItemDataResolver
+     */
+    getEntityType(): Promise<string | undefined>;
+    /**
+     * Get the unique of the item
+     * @returns {Promise<string | undefined>} The unique of the item
+     * @memberof UmbMediaItemDataResolver
+     */
+    getUnique(): Promise<string | undefined>;
+    /**
+     * Get the name of the item
+     * @returns {Promise<string>} The name of the item
+     * @memberof UmbMediaItemDataResolver
+     */
+    getName(): Promise<string>;
+    /**
+     * Get the icon of the item
+     * @returns {Promise<string | undefined>} The icon of the item
+     * @memberof UmbMediaItemDataResolver
+     */
+    getIcon(): Promise<string | undefined>;
+}
+export {};

package/dist-cms/packages/media/media/item/media-item-data-resolver.js

@@ -0,0 +1,145 @@
+import { UmbControllerBase } from '../../../../libs/class-api/index.js';
+import { UmbObjectState, UmbStringState } from '../../../../libs/observable-api/index.js';
+import { UMB_VARIANT_CONTEXT } from '../../../core/variant/index.js';
+/**
+ *
+ * @param {Array<UmbMediaItemVariantModel>} variants - An array of variants to check
+ * @returns {boolean} Returns true if the variants are invariant, false otherwise
+ */
+function isVariantsInvariant(variants) {
+    return variants?.[0]?.culture === null;
+}
+/**
+ *
+ * @param {Array<UmbMediaItemVariantModel>} variants - An array of variants to search
+ * @param {string} culture - The culture to find
+ * @returns {T | undefined} Returns the variant that matches the culture, or undefined if not found
+ */
+function findVariant(variants, culture) {
+    return variants.find((x) => x.culture === culture);
+}
+/**
+ * A controller for resolving data for a media item
+ * @exports
+ * @class UmbMediaItemDataResolver
+ * @augments {UmbControllerBase}
+ */
+export class UmbMediaItemDataResolver extends UmbControllerBase {
+    #data;
+    #name;
+    #variantContext;
+    #fallbackCulture;
+    #displayCulture;
+    constructor(host) {
+        super(host);
+        this.#data = new UmbObjectState(undefined);
+        this.entityType = this.#data.asObservablePart((x) => x?.entityType);
+        this.unique = this.#data.asObservablePart((x) => x?.unique);
+        this.icon = this.#data.asObservablePart((x) => x?.mediaType.icon);
+        this.#name = new UmbStringState(undefined);
+        this.name = this.#name.asObservable();
+        this.consumeContext(UMB_VARIANT_CONTEXT, (context) => {
+            this.#variantContext = context;
+            this.#observeVariantContext();
+        });
+    }
+    #observeVariantContext() {
+        this.observe(this.#variantContext?.displayCulture, (displayCulture) => {
+            if (displayCulture === undefined)
+                return;
+            this.#displayCulture = displayCulture;
+            this.#setVariantAwareValues();
+        }, 'umbObserveDisplayCulture');
+        this.observe(this.#variantContext?.fallbackCulture, (fallbackCulture) => {
+            if (fallbackCulture === undefined)
+                return;
+            this.#fallbackCulture = fallbackCulture;
+            this.#setVariantAwareValues();
+        }, 'umbObserveFallbackCulture');
+    }
+    /**
+     * Get the current item
+     * @returns {MediaItemModel | undefined} The current item
+     * @memberof UmbMediaItemDataResolver
+     */
+    getData() {
+        return this.#data.getValue();
+    }
+    /**
+     * Set the current item
+     * @param {MediaItemModel | undefined} data The current item
+     * @memberof UmbMediaItemDataResolver
+     */
+    setData(data) {
+        this.#data.setValue(data);
+        this.#setVariantAwareValues();
+    }
+    /**
+     * Get the entity type of the item
+     * @returns {Promise<string | undefined>} The entity type of the item
+     * @memberof UmbMediaItemDataResolver
+     */
+    async getEntityType() {
+        return await this.observe(this.entityType).asPromise();
+    }
+    /**
+     * Get the unique of the item
+     * @returns {Promise<string | undefined>} The unique of the item
+     * @memberof UmbMediaItemDataResolver
+     */
+    async getUnique() {
+        return await this.observe(this.unique).asPromise();
+    }
+    /**
+     * Get the name of the item
+     * @returns {Promise<string>} The name of the item
+     * @memberof UmbMediaItemDataResolver
+     */
+    async getName() {
+        return (await this.observe(this.name).asPromise()) || '';
+    }
+    /**
+     * Get the icon of the item
+     * @returns {Promise<string | undefined>} The icon of the item
+     * @memberof UmbMediaItemDataResolver
+     */
+    async getIcon() {
+        return await this.observe(this.icon).asPromise();
+    }
+    #setVariantAwareValues() {
+        if (!this.#variantContext)
+            return;
+        if (!this.#displayCulture)
+            return;
+        if (!this.#fallbackCulture)
+            return;
+        if (!this.#data)
+            return;
+        this.#setName();
+    }
+    #setName() {
+        const variant = this.#getCurrentVariant();
+        if (variant?.name) {
+            this.#name.setValue(variant.name);
+            return;
+        }
+        const variants = this.getData()?.variants;
+        if (variants) {
+            const fallbackName = findVariant(variants, this.#fallbackCulture)?.name ?? variants.find((x) => x.name)?.name;
+            if (fallbackName) {
+                this.#name.setValue(`(${fallbackName})`);
+                return;
+            }
+        }
+        this.#name.setValue('(Untitled)');
+    }
+    #getCurrentVariant() {
+        const variants = this.getData()?.variants;
+        if (!variants)
+            return undefined;
+        if (isVariantsInvariant(variants)) {
+            return variants[0];
+        }
+        return findVariant(variants, this.#displayCulture);
+    }
+}

package/dist-cms/packages/media/media/item/media-item-ref.element.js

@@ -59,7 +59,7 @@ let UmbMediaItemRefElement = class UmbMediaItemRefElement extends UmbLitElement
 			<uui-ref-node
 				name=${this.item.name}
 				href=${ifDefined(this.#getHref(this.item))}
-				?readonly=${this.readonly || !this._userHasSectionAccess}
+				?readonly=${this.readonly || !this._userHasSectionAccess || !this._editPath}
 				?standalone=${this.standalone}>
 				<slot name="actions" slot="actions"></slot>
 				${this.#renderIcon(this.item)}

package/dist-cms/packages/media/media/manifests.js

@@ -1,6 +1,7 @@
 import { manifests as startNodeManifests } from './user-start-node/manifests.js';
 import { manifests as auditLogManifests } from './audit-log/manifests.js';
 import { manifests as collectionManifests } from './collection/manifests.js';
+import { manifests as configurationManifests } from './configuration/manifests.js';
 import { manifests as entityActionsManifests } from './entity-actions/manifests.js';
 import { manifests as entityBulkActionsManifests } from './entity-bulk-actions/manifests.js';
 import { manifests as fileUploadPreviewManifests } from './components/input-upload-field/manifests.js';
@@ -22,6 +23,7 @@ export const manifests = [
     ...startNodeManifests,
     ...auditLogManifests,
     ...collectionManifests,
+    ...configurationManifests,
     ...entityActionsManifests,
     ...entityBulkActionsManifests,
     ...fileUploadPreviewManifests,

package/dist-cms/packages/media/media/modals/media-picker/components/media-picker-folder-path.element.js

@@ -114,11 +114,23 @@ let UmbMediaPickerFolderPathElement = class UmbMediaPickerFolderPathElement exte
     }
     #cancelFolderTypeSelection() {
         this._selectingFolderType = false;
+        this.#focusAddFolderButton();
     }
-    async #addFolder(e) {
-        e.stopPropagation();
-        const newName = e.target.value;
+    #focusAddFolderButton() {
+        requestAnimationFrame(() => {
+            this.getHostElement().shadowRoot.querySelector('#add-folder')?.focus();
+        });
+    }
+    #onSubmit(e) {
+        e.preventDefault();
+        const folderName = new FormData(e.target).get('folderName');
+        this.#addFolder(typeof folderName === 'string' ? folderName : undefined);
+    }
+    async #addFolder(newName) {
+        if (!this._typingNewFolder)
+            return;
         this._typingNewFolder = false;
+        this.#focusAddFolderButton();
         if (!newName || !this.#selectedFolderType?.unique)
             return;
         const newUnique = UmbId.new();
@@ -155,12 +167,16 @@ let UmbMediaPickerFolderPathElement = class UmbMediaPickerFolderPathElement exte
         this.currentMedia = { name, unique, entityType, mediaType };
         this.dispatchEvent(new UmbChangeEvent());
     }
-    #onKeypress(e) {
-        if (e.key === 'Enter') {
-            requestAnimationFrame(() => {
-                const element = this.getHostElement().shadowRoot.querySelector('#new-folder');
-                element.blur();
-            });
+    #cancelFolderCreation() {
+        this._typingNewFolder = false;
+        this._selectingFolderType = false;
+        this.#focusAddFolderButton();
+    }
+    #onKeydown(e) {
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            e.stopImmediatePropagation();
+            this.#cancelFolderCreation();
         }
     }
     render() {
@@ -177,12 +193,28 @@ let UmbMediaPickerFolderPathElement = class UmbMediaPickerFolderPathElement exte
     }
     #renderFolderCreation() {
         if (this._typingNewFolder) {
-            return html `<uui-input
-				id="new-folder"
-				label=${this.localize.term('create_enterFolderName')}
-				placeholder=${this.localize.term('create_enterFolderName')}
-				@blur=${this.#addFolder}
-				@keypress=${this.#onKeypress}></uui-input>`;
+            return html `
+				<uui-form>
+					<form id="new-folder-form" novalidate @submit=${this.#onSubmit}>
+						<uui-input
+							id="new-folder"
+							name="folderName"
+							label=${this.localize.term('create_enterFolderName')}
+							placeholder=${this.localize.term('create_enterFolderName')}
+							@keydown=${this.#onKeydown}>
+							<uui-button
+								slot="append"
+								type="button"
+								compact
+								label=${this.localize.term('general_cancel')}
+								@click=${this.#cancelFolderCreation}>
+								<uui-icon name="remove"></uui-icon>
+							</uui-button>
+						</uui-input>
+						<uui-button look="outline" type="submit" label=${this.localize.term('actions_create')}></uui-button>
+					</form>
+				</uui-form>
+			`;
         }
         if (this._selectingFolderType) {
             return html `<div id="folder-type-selection">
@@ -198,6 +230,7 @@ let UmbMediaPickerFolderPathElement = class UmbMediaPickerFolderPathElement exte
             return nothing;
         }
         return html `<uui-button
+			id="add-folder"
 			label=${this.localize.term('visuallyHiddenTexts_createNewFolder')}
 			compact
 			@click=${this.#onAddFolderClick}>
@@ -210,17 +243,21 @@ let UmbMediaPickerFolderPathElement = class UmbMediaPickerFolderPathElement exte
 				display: flex;
 				align-items: center;
 				margin: 0 var(--uui-size-3);
-				overflow: hidden;
 				min-width: 0;
 			}
 
-			#new-folder {
+			#new-folder-form {
+				display: flex;
+				align-items: center;
+				gap: var(--uui-size-2);
 				margin-left: var(--uui-size-2);
-				width: 150px;
-				height: 100%;
 				flex-shrink: 0;
 			}
 
+			#new-folder {
+				width: 220px;
+			}
+
 			#folder-type-selection {
 				display: flex;
 				align-items: center;

package/dist-cms/packages/media/media/modals/media-picker/media-picker-modal.element.d.ts

@@ -18,12 +18,14 @@ export declare class UmbMediaPickerModalElement extends UmbPickerModalBaseElemen
     private _currentMediaEntity;
     private _isSelectionMode;
     private _startNode;
+    private _noAccess;
     private _searching;
     private _dropzone;
     private _viewPopover?;
     private _currentView;
     constructor();
     connectedCallback(): Promise<void>;
+    protected updated(_changedProperties: PropertyValues): void;
     protected firstUpdated(_changedProperties: PropertyValues): Promise<void>;
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];

package/dist-cms/packages/media/media/modals/media-picker/media-picker-modal.element.js

@@ -11,11 +11,13 @@ import { UmbMediaSearchProvider } from '../../search/index.js';
 import { UmbMediaPickerContext } from './media-picker.context.js';
 import { css, customElement, html, ifDefined, nothing, query, repeat, state, } from '../../../../../external/lit/index.js';
 import { debounce, UmbPaginationManager } from '../../../../core/utils/index.js';
+import { observeMultiple } from '../../../../../libs/observable-api/index.js';
+import { UmbFileDropzoneItemStatus } from '../../../dropzone/index.js';
 import { UmbMediaTypeStructureRepository } from '../../../media-types/index.js';
 import { UmbPickerModalBaseElement } from '../../../../core/picker/index.js';
+import { UMB_CURRENT_USER_CONTEXT } from '../../../../user/current-user/index.js';
 import { UMB_PROPERTY_TYPE_BASED_PROPERTY_CONTEXT } from '../../../../content/content/index.js';
 import { UMB_VARIANT_CONTEXT } from '../../../../core/variant/index.js';
-import { UmbFileDropzoneItemStatus } from '../../../dropzone/index.js';
 import './components/index.js';
 import '../../../imaging/index.js';
 const root = { name: 'Media', unique: null, entityType: UMB_MEDIA_ROOT_ENTITY_TYPE };
@@ -26,6 +28,8 @@ let UmbMediaPickerModalElement = class UmbMediaPickerModalElement extends UmbPic
     #mediaSearchProvider;
     #mediaTypeStructureRepository;
     #folderTypeUniques;
+    #hasMediaRootAccess;
+    #mediaStartNodeUniques;
     #dataType;
     #pagingMap;
     #contextCulture;
@@ -38,6 +42,8 @@ let UmbMediaPickerModalElement = class UmbMediaPickerModalElement extends UmbPic
         this.#mediaSearchProvider = new UmbMediaSearchProvider(this);
         this.#mediaTypeStructureRepository = new UmbMediaTypeStructureRepository(this);
         this.#folderTypeUniques = new Set();
+        this.#hasMediaRootAccess = false;
+        this.#mediaStartNodeUniques = [];
         /* TODO: We currently only rely on the interactionMemory manager in the picker interface which is correctly implemented in the Media Picker
         Remove this type cast when MediaPicker has implemented the full PickerContext interface */
         this._pickerContext = new UmbMediaPickerContext(this);
@@ -49,6 +55,7 @@ let UmbMediaPickerModalElement = class UmbMediaPickerModalElement extends UmbPic
         this._searchQuery = '';
         this._currentMediaEntity = root;
         this._isSelectionMode = false;
+        this._noAccess = false;
         this._searching = false;
         this._currentView = 'cards';
         this.#pagingMap = new Map();
@@ -68,6 +75,15 @@ let UmbMediaPickerModalElement = class UmbMediaPickerModalElement extends UmbPic
                 this.#contextCulture = culture;
             });
         });
+        this.consumeContext(UMB_CURRENT_USER_CONTEXT, (context) => {
+            if (!context)
+                return;
+            this.observe(observeMultiple([context.hasMediaRootAccess, context.mediaStartNodeUniques]), ([hasMediaRootAccess, mediaStartNodeUniques]) => {
+                this.#hasMediaRootAccess = hasMediaRootAccess ?? false;
+                this.#mediaStartNodeUniques = mediaStartNodeUniques?.map((x) => x.unique) ?? [];
+                this.#checkMediaAccess();
+            }, 'umbCurrentUserMediaAccessObserver');
+        });
     }
     async connectedCallback() {
         super.connectedCallback();
@@ -78,6 +94,48 @@ let UmbMediaPickerModalElement = class UmbMediaPickerModalElement extends UmbPic
             this._selectableFilter = this.data?.pickableFilter;
         }
     }
+    updated(_changedProperties) {
+        super.updated(_changedProperties);
+        if (_changedProperties.has('_currentMediaEntity')) {
+            this.#checkMediaAccess();
+        }
+    }
+    async #checkMediaAccess() {
+        // Root access grants access to the entire media tree.
+        if (this.#hasMediaRootAccess) {
+            this._noAccess = false;
+            return;
+        }
+        // Without root access and without any start-nodes the user has no media access at all.
+        if (this.#mediaStartNodeUniques.length === 0) {
+            this._noAccess = true;
+            return;
+        }
+        const unique = this._currentMediaEntity.unique;
+        // The media root is only accessible with root access (handled above).
+        if (unique === null) {
+            this._noAccess = true;
+            return;
+        }
+        // is the current media item a start-node? If so, access is granted.
+        if (this.#mediaStartNodeUniques.includes(unique)) {
+            this._noAccess = false;
+            return;
+        }
+        // Get ancestors of the current media item and check if any of them are start-nodes. If so, access is granted:
+        // TODO: This is also requested by the media-picker-folder-path.element.ts, we should optimize that to only become one request.
+        const { data, error } = await this.#mediaTreeRepository.requestTreeItemAncestors({
+            treeItem: { unique, entityType: this._currentMediaEntity.entityType },
+        });
+        if (error) {
+            throw new Error(`Failed to get ancestors of media item with unique ${unique}: ${error.message}`);
+        }
+        // If unique changed then user navigated in the mean time:
+        if (this._currentMediaEntity.unique !== unique)
+            return;
+        const path = data?.map((item) => item.unique) ?? [unique];
+        this._noAccess = !path.some((ancestorUnique) => this.#mediaStartNodeUniques.includes(ancestorUnique));
+    }
     async firstUpdated(_changedProperties) {
         super.firstUpdated(_changedProperties);
         const startNode = this.data?.startNode;
@@ -87,7 +145,6 @@ let UmbMediaPickerModalElement = class UmbMediaPickerModalElement extends UmbPic
             const { data } = await this.#mediaItemRepository.requestItems(uniquesToRequest);
             this._startNode = data?.find((x) => x.unique === startNode?.unique);
             const locationMemoryItem = data?.find((x) => x.unique === locationFromMemory?.entity.unique);
-            // TODO: We probably need to check if the location item is within the start node. If not then fall back to start node.
             const source = locationMemoryItem || this._startNode;
             if (source) {
                 this._currentMediaEntity = {
@@ -347,7 +404,8 @@ let UmbMediaPickerModalElement = class UmbMediaPickerModalElement extends UmbPic
 				id="dropzone"
 				multiple
 				@change=${this.#onDropzoneChange}
-				.parentUnique=${this._currentMediaEntity.unique}></umb-dropzone-media>
+				.parentUnique=${this._currentMediaEntity.unique}
+				.noAccess=${this._noAccess}></umb-dropzone-media>
 			${this._searchQuery ? this.#renderSearchResult() : this.#renderCurrentChildren()} `;
     }
     #renderSearchResult() {
@@ -387,6 +445,7 @@ let UmbMediaPickerModalElement = class UmbMediaPickerModalElement extends UmbPic
 			<div id="toolbar">
 				<div id="search">
 					<uui-input
+						name="media-search"
 						label=${this.localize.term('general_search')}
 						placeholder=${this.localize.term('placeholders_search')}
 						@input=${this.#onSearch}
@@ -409,7 +468,8 @@ let UmbMediaPickerModalElement = class UmbMediaPickerModalElement extends UmbPic
 					@click=${() => this._dropzone.browse()}
 					label=${this.localize.term('general_upload')}
 					look="outline"
-					color="default"></uui-button>
+					color="default"
+					.disabled=${this._noAccess}></uui-button>
 				<uui-button compact popovertarget="media-picker-view-popover" label="View">
 					<umb-icon name=${this._currentView === 'cards' ? 'icon-grid' : 'icon-table'}></umb-icon>
 				</uui-button>
@@ -450,10 +510,7 @@ let UmbMediaPickerModalElement = class UmbMediaPickerModalElement extends UmbPic
 				?selected=${this.value?.selection?.find((value) => value === item.unique)}
 				?selectable=${selectable}
 				?select-only=${this._isSelectionMode || canNavigate === false}>
-				<umb-imaging-thumbnail
-					unique=${item.unique}
-					alt=${item.name}
-					icon=${item.mediaType.icon}></umb-imaging-thumbnail>
+				<umb-media-thumbnail unique=${item.unique} alt=${item.name} icon=${item.mediaType.icon}></umb-media-thumbnail>
 			</uui-card-media>
 		`;
     }
@@ -618,7 +675,6 @@ let UmbMediaPickerModalElement = class UmbMediaPickerModalElement extends UmbPic
 			}
 
 			umb-media-picker-folder-path {
-				overflow: hidden;
 				min-width: 0;
 				flex: 1 1 0%;
 			}
@@ -658,6 +714,9 @@ __decorate([
 __decorate([
     state()
 ], UmbMediaPickerModalElement.prototype, "_startNode", void 0);
+__decorate([
+    state()
+], UmbMediaPickerModalElement.prototype, "_noAccess", void 0);
 __decorate([
     state()
 ], UmbMediaPickerModalElement.prototype, "_searching", void 0);

package/dist-cms/packages/media/media/property-editors/image-cropper/manifests.js

@@ -1,4 +1,5 @@
 import { manifest as schemaManifest } from './Umbraco.ImageCropper.js';
+import { manifests as valueSummaryManifests } from './value-summary/manifests.js';
 export const manifests = [
     {
         type: 'propertyEditorUi',
@@ -8,10 +9,11 @@ export const manifests = [
         meta: {
             label: 'Image Cropper',
             icon: 'icon-crop',
-            group: 'media',
+            group: '#propertyEditorUIGroups_media',
             keywords: ['image', 'crop', 'photo', 'thumbnail', 'avatar', 'profile', 'cover', 'portrait'],
             propertyEditorSchemaAlias: 'Umbraco.ImageCropper',
         },
     },
     schemaManifest,
+    ...valueSummaryManifests,
 ];

package/dist-cms/packages/media/media/property-editors/image-cropper/value-summary/manifests.d.ts

@@ -0,0 +1 @@
+export declare const manifests: Array<UmbExtensionManifest>;