Merge pull request #1926 from umbraco/bugfix/static-file-picker

Bugfix: Static file picker

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-layout-stylesheet/property-editor-ui-block-grid-layout-stylesheet.element.ts

@@ -27,6 +27,8 @@ export class UmbPropertyEditorUIBlockGridLayoutStylesheetElement
 		return this._value;
 	}
 
+	private _pickableFilter = (item: any) => item.unique.endsWith('css');
+
 	@property({ attribute: false })
 	public config?: UmbPropertyEditorConfigCollection;
 
@@ -40,6 +42,7 @@ export class UmbPropertyEditorUIBlockGridLayoutStylesheetElement
 		return html`
 			<umb-input-static-file
 				@change=${this._onChange}
+				.pickableFilter=${this._pickableFilter}
 				.selection=${this._value}
 				.min=${0}
 				.max=${1}></umb-input-static-file>

src/Umbraco.Web.UI.Client/src/packages/static-file/components/input-static-file/input-static-file.context.ts

@@ -1,13 +1,17 @@
-import { UMB_STATIC_FILE_TREE_REPOSITORY_ALIAS } from '../../tree/index.js';
+import { UMB_STATIC_FILE_ITEM_REPOSITORY_ALIAS } from '../../repository/item/manifests.js';
 import { UMB_STATIC_FILE_PICKER_MODAL } from '../../modals/index.js';
 import type { UmbStaticFileItemModel } from '../../repository/item/types.js';
+import type { UmbStaticFilePickerModalData, UmbStaticFilePickerModalValue } from '../../modals/index.js';
 import { UmbPickerInputContext } from '@umbraco-cms/backoffice/picker-input';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 
-export class UmbStaticFilePickerContext extends UmbPickerInputContext<UmbStaticFileItemModel> {
+export class UmbStaticFilePickerContext extends UmbPickerInputContext<
+	UmbStaticFileItemModel,
+	any,
+	UmbStaticFilePickerModalData,
+	UmbStaticFilePickerModalValue
+> {
 	constructor(host: UmbControllerHost) {
-		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-		// @ts-ignore
-		super(host, UMB_STATIC_FILE_TREE_REPOSITORY_ALIAS, UMB_STATIC_FILE_PICKER_MODAL);
+		super(host, UMB_STATIC_FILE_ITEM_REPOSITORY_ALIAS, UMB_STATIC_FILE_PICKER_MODAL);
 	}
 }

src/Umbraco.Web.UI.Client/src/packages/static-file/components/input-static-file/input-static-file.element.ts

@@ -4,9 +4,12 @@ import { css, customElement, html, nothing, property, repeat, state } from '@umb
 import { splitStringToArray } from '@umbraco-cms/backoffice/utils';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UmbServerFilePathUniqueSerializer } from '@umbraco-cms/backoffice/server-file-system';
 
 @customElement('umb-input-static-file')
 export class UmbInputStaticFileElement extends UUIFormControlMixin(UmbLitElement, '') {
+	#serializer = new UmbServerFilePathUniqueSerializer();
+
 	/**
 	 * This is a minimum amount of selected files in this input.
 	 * @type {number}
@@ -70,6 +73,9 @@ export class UmbInputStaticFileElement extends UUIFormControlMixin(UmbLitElement
 		return this.selection.join(',');
 	}
 
+	@property()
+	public pickableFilter?: (item: UmbStaticFileItemModel) => boolean;
+
 	@state()
 	private _items?: Array<UmbStaticFileItemModel>;
 
@@ -112,13 +118,21 @@ export class UmbInputStaticFileElement extends UUIFormControlMixin(UmbLitElement
 		`;
 	}
 
+	#openPicker() {
+		this.#pickerContext.openPicker({
+			pickableFilter: this.pickableFilter,
+			multiple: this.max === 1 ? false : true,
+			hideTreeRoot: true,
+		});
+	}
+
 	#renderAddButton() {
 		if (this.max === 1 && this.selection.length >= this.max) return;
 		return html`
 			<uui-button
 				id="btn-add"
 				look="placeholder"
-				@click=${() => this.#pickerContext.openPicker()}
+				@click=${this.#openPicker}
 				label=${this.localize.term('general_choose')}></uui-button>
 		`;
 	}
@@ -126,7 +140,7 @@ export class UmbInputStaticFileElement extends UUIFormControlMixin(UmbLitElement
 	private _renderItem(item: UmbStaticFileItemModel) {
 		if (!item.unique) return;
 		return html`
-			<uui-ref-node name=${item.name} detail=${item.unique}>
+			<uui-ref-node name=${item.name} .detail=${this.#serializer.toServerPath(item.unique) || ''}>
 				<!-- TODO: implement is trashed <uui-tag size="s" slot="tag" color="danger">Trashed</uui-tag> -->
 				<uui-action-bar slot="actions">
 					<uui-button

src/Umbraco.Web.UI.Client/src/packages/static-file/modals/static-file-picker-modal.token.ts

@@ -1,5 +1,5 @@
 import { UMB_STATIC_FILE_TREE_ALIAS } from '../tree/manifests.js';
-import type { StaticFileItemResponseModel } from '@umbraco-cms/backoffice/external/backend-api';
+import type { UmbStaticFileItemModel } from '../repository/item/types.js';
 import {
 	type UmbTreePickerModalValue,
 	type UmbTreePickerModalData,
@@ -7,7 +7,7 @@ import {
 } from '@umbraco-cms/backoffice/tree';
 import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
 
-export type UmbStaticFilePickerModalData = UmbTreePickerModalData<StaticFileItemResponseModel>;
+export type UmbStaticFilePickerModalData = UmbTreePickerModalData<UmbStaticFileItemModel>;
 export type UmbStaticFilePickerModalValue = UmbTreePickerModalValue;
 
 export const UMB_STATIC_FILE_PICKER_MODAL = new UmbModalToken<

src/Umbraco.Web.UI.Client/src/packages/static-file/repository/item/static-file-item.server.data-source.ts

@@ -3,6 +3,7 @@ import { UmbItemServerDataSourceBase } from '@umbraco-cms/backoffice/repository'
 import type { StaticFileItemResponseModel } from '@umbraco-cms/backoffice/external/backend-api';
 import { StaticFileService } from '@umbraco-cms/backoffice/external/backend-api';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import { UmbServerFilePathUniqueSerializer } from '@umbraco-cms/backoffice/server-file-system';
 
 /**
  * A server data source for Static File items
@@ -27,14 +28,20 @@ export class UmbStaticFileItemServerDataSource extends UmbItemServerDataSourceBa
 	}
 }
 
-/* eslint-disable local-rules/no-direct-api-import */
-const getItems = (uniques: Array<string>) => StaticFileService.getItemStaticFile({ path: uniques });
+const getItems = (uniques: Array<string>) => {
+	const serializer = new UmbServerFilePathUniqueSerializer();
+	const path = uniques.map((unique) => serializer.toServerPath(unique)!);
+
+	/* eslint-disable local-rules/no-direct-api-import */
+	return StaticFileService.getItemStaticFile({ path });
+};
 
 const mapper = (item: StaticFileItemResponseModel): UmbStaticFileItemModel => {
+	const serializer = new UmbServerFilePathUniqueSerializer();
 	return {
 		isFolder: item.isFolder,
 		name: item.name,
-		parentUnique: item.parent ? item.parent.path : null,
-		unique: item.path,
+		parentUnique: item.parent ? serializer.toUnique(item.parent.path) : null,
+		unique: serializer.toUnique(item.path),
 	};
 };