Merge remote-tracking branch 'origin/main' into feature/login-context

src/Umbraco.Web.UI.Client/.github/workflows/build_test.yml

@@ -34,7 +34,7 @@ jobs:
           node-version: ${{ matrix.node-version }}
           cache: 'npm'
       - run: npm ci --no-audit --no-fund --prefer-offline
-      - run: npm run lint
+      - run: npm run lint:errors
       - run: npm run build
       - run: npm run generate:jsonschema:dist
       - run: npx playwright install --with-deps

src/Umbraco.Web.UI.Client/src/packages/block/block/conditions/block-entry-show-content-edit.condition.ts

@@ -1,10 +1,7 @@
 import { UMB_BLOCK_ENTRY_CONTEXT } from '../context/block-entry.context-token.js';
+import type { BlockEntryShowContentEditConditionConfig } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbConditionBase } from '@umbraco-cms/backoffice/extension-registry';
-import type {
-	UmbConditionConfigBase,
-	UmbConditionControllerArguments,
-	UmbExtensionCondition,
-} from '@umbraco-cms/backoffice/extension-api';
+import type { UmbConditionControllerArguments, UmbExtensionCondition } from '@umbraco-cms/backoffice/extension-api';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 
 export class UmbBlockEntryShowContentEditCondition
@@ -30,6 +27,3 @@ export class UmbBlockEntryShowContentEditCondition
 }
 
 export default UmbBlockEntryShowContentEditCondition;
-
-export type BlockEntryShowContentEditConditionConfig =
-	UmbConditionConfigBase<'Umb.Condition.BlockEntryShowContentEdit'>;

src/Umbraco.Web.UI.Client/src/packages/block/block/conditions/block-workspace-has-settings.condition.ts

@@ -1,10 +1,7 @@
 import { UMB_BLOCK_WORKSPACE_CONTEXT } from '../workspace/block-workspace.context-token.js';
 import { UmbConditionBase } from '@umbraco-cms/backoffice/extension-registry';
-import type {
-	UmbConditionConfigBase,
-	UmbConditionControllerArguments,
-	UmbExtensionCondition,
-} from '@umbraco-cms/backoffice/extension-api';
+import type { BlockWorkspaceHasSettingsConditionConfig } from '@umbraco-cms/backoffice/extension-registry';
+import type { UmbConditionControllerArguments, UmbExtensionCondition } from '@umbraco-cms/backoffice/extension-api';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 
 export class UmbBlockWorkspaceHasSettingsCondition
@@ -30,6 +27,3 @@ export class UmbBlockWorkspaceHasSettingsCondition
 }
 
 export default UmbBlockWorkspaceHasSettingsCondition;
-
-export type BlockWorkspaceHasSettingsConditionConfig =
-	UmbConditionConfigBase<'Umb.Condition.BlockWorkspaceHasSettings'>;

src/Umbraco.Web.UI.Client/src/packages/block/block/conditions/index.ts

@@ -1,2 +0,0 @@
-export type { BlockEntryShowContentEditConditionConfig } from './block-entry-show-content-edit.condition.js';
-export type { BlockWorkspaceHasSettingsConditionConfig } from './block-workspace-has-settings.condition.js';

src/Umbraco.Web.UI.Client/src/packages/block/block/index.ts

@@ -1,4 +1,3 @@
-export * from './conditions/index.js';
 export * from './context/index.js';
 export * from './modals/index.js';
 export * from './types.js';

src/Umbraco.Web.UI.Client/src/packages/core/components/history/history-item.element.ts

@@ -1,35 +1,19 @@
-import { UMB_APP_CONTEXT } from '@umbraco-cms/backoffice/app';
-import { css, html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
+import { css, html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 
 @customElement('umb-history-item')
 export class UmbHistoryItemElement extends UmbLitElement {
-	@property({ type: String })
-	src?: string;
-
 	@property({ type: String })
 	name?: string;
 
 	@property({ type: String })
 	detail?: string;
 
-	@state()
-	private _serverUrl?: string;
-
-	constructor() {
-		super();
-		this.consumeContext(UMB_APP_CONTEXT, (instance) => {
-			this._serverUrl = instance.getServerUrl();
-		});
-	}
-
 	render() {
 		return html`
 			<div class="user-info">
-				<uui-avatar
-					.name="${this.name ?? 'Unknown'}"
-					.imgSrc="${this.src ? this._serverUrl + this.src : ''}"></uui-avatar>
+				<slot name="avatar"></slot>
 				<div>
 					<span class="name">${this.name}</span>
 					<span class="detail">${this.detail}</span>
@@ -55,10 +39,12 @@ export class UmbHistoryItemElement extends UmbLitElement {
 				--uui-button-height: calc(var(--uui-size-2) * 4);
 				margin-right: var(--uui-size-2);
 			}
+
 			#actions-container {
 				opacity: 0;
 				transition: opacity 120ms;
 			}
+
 			:host(:hover) #actions-container {
 				opacity: 1;
 			}

src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts

@@ -8,14 +8,12 @@ export * from './dropdown/index.js';
 export * from './entity-actions-bundle/index.js';
 export * from './extension-slot/index.js';
 export * from './extension-with-api-slot/index.js';
-export * from './field-dropdown-list/index.js';
 export * from './footer-layout/index.js';
 export * from './header-app/index.js';
 export * from './history/index.js';
 export * from './icon/index.js';
 export * from './input-collection-configuration/index.js';
 export * from './input-color/index.js';
-export * from './input-content-type-property/index.js';
 export * from './input-date/index.js';
 export * from './input-dropdown/index.js';
 export * from './input-entity/index.js';

src/Umbraco.Web.UI.Client/src/packages/core/components/input-upload-field/index.ts

@@ -3,3 +3,4 @@ export * from './input-upload-field-file.element.js';
 export * from './input-upload-field-audio.element.js';
 export * from './input-upload-field-video.element.js';
 export * from './input-upload-field-svg.element.js';
+export * from './input-upload-field-image.element.js';

src/Umbraco.Web.UI.Client/src/packages/core/components/input-upload-field/input-upload-field-image.element.ts

@@ -0,0 +1,40 @@
+import { html, customElement, property, css } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+
+@customElement('umb-input-upload-field-image')
+export class UmbInputUploadFieldImageElement extends UmbLitElement {
+	@property({ type: String })
+	path = '';
+
+	render() {
+		if (!this.path) return html`<uui-loader></uui-loader>`;
+
+		return html`<img src=${this.path} alt="" />`;
+	}
+
+	static styles = [
+		css`
+			:host {
+				display: flex;
+				height: 100%;
+				position: relative;
+				width: fit-content;
+				max-height: 400px;
+			}
+
+			img {
+				max-width: 100%;
+				max-height: 100%;
+				object-fit: contain;
+				width: auto;
+				height: auto;
+			}
+		`,
+	];
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-input-upload-field-image': UmbInputUploadFieldImageElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/core/components/input-upload-field/input-upload-field.element.ts

@@ -1,6 +1,5 @@
 import type { UmbTemporaryFileModel } from '../../temporary-file/temporary-file-manager.class.js';
 import { UmbTemporaryFileManager } from '../../temporary-file/temporary-file-manager.class.js';
-import { UMB_PROPERTY_DATASET_CONTEXT } from '../../property/property-dataset/property-dataset-context.token.js';
 import { UmbId } from '@umbraco-cms/backoffice/id';
 import {
 	css,
@@ -49,20 +48,19 @@ export class UmbInputUploadFieldElement extends UUIFormControlMixin(UmbLitElemen
 		this.#setExtensions(value);
 	}
 	get fileExtensions(): Array<string> | undefined {
-		return this.extensions;
+		return this._extensions;
 	}
 
 	/**
 	 * @description Allows the user to upload multiple files.
-	 * @type {Boolean}
 	 * @default false
 	 * @attr
 	 */
 	@property({ type: Boolean })
-	multiple = false;
+	public multiple = false;
 
 	@state()
-	_files: Array<{
+	private _files: Array<{
 		path: string;
 		unique: string;
 		queueItem?: UmbTemporaryFileModel;
@@ -70,7 +68,7 @@ export class UmbInputUploadFieldElement extends UUIFormControlMixin(UmbLitElemen
 	}> = [];
 
 	@state()
-	extensions?: string[];
+	private _extensions?: string[];
 
 	@query('#dropzone')
 	private _dropzone?: UUIFileDropzoneElement;
@@ -124,8 +122,13 @@ export class UmbInputUploadFieldElement extends UUIFormControlMixin(UmbLitElemen
 	}
 
 	#setExtensions(value: Array<string>) {
+		if (!value) {
+			this._extensions = undefined;
+			return;
+		}
+
 		// TODO: The dropzone uui component does not support file extensions without a dot. Remove this when it does.
-		this.extensions = value?.map((extension) => {
+		this._extensions = value?.map((extension) => {
 			return `.${extension}`;
 		});
 	}
@@ -198,7 +201,7 @@ export class UmbInputUploadFieldElement extends UUIFormControlMixin(UmbLitElemen
 				id="dropzone"
 				label="dropzone"
 				@change="${this.#onUpload}"
-				accept="${ifDefined(this.extensions?.join(', '))}"
+				accept="${ifDefined(this._extensions?.join(', '))}"
 				?multiple="${this.multiple}">
 				<uui-button label=${this.localize.term('media_clickToUpload')} @click="${this.#handleBrowse}"></uui-button>
 			</uui-file-dropzone>
@@ -272,9 +275,11 @@ export class UmbInputUploadFieldElement extends UUIFormControlMixin(UmbLitElemen
 	}
 
 	#handleRemove() {
-		this._files = [];
 		const uniques = this._files.map((file) => file.unique);
 		this.#manager.remove(uniques);
+		this._files = [];
+		this.value = '';
+		this.keys = [];
 
 		this.dispatchEvent(new UmbChangeEvent());
 	}

src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/conditions/index.ts

@@ -1,5 +1,4 @@
 export { UmbSwitchCondition } from './switch.condition.js';
 export { UmbConditionBase } from './condition-base.controller.js';
-/*
-export { UmbSectionAliasCondition } from './section-alias.condition.js';
-*/
+
+export type { BlockEntryShowContentEditConditionConfig, BlockWorkspaceHasSettingsConditionConfig } from './types.js';

src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/conditions/types.ts

@@ -3,7 +3,6 @@ import type { CollectionBulkActionPermissionConditionConfig } from '../../collec
 import type { UmbSectionUserPermissionConditionConfig } from '../../section/conditions/index.js';
 import type { SectionAliasConditionConfig } from './section-alias.condition.js';
 import type { SwitchConditionConfig } from './switch.condition.js';
-import type { BlockWorkspaceHasSettingsConditionConfig } from '@umbraco-cms/backoffice/block';
 import type {
 	WorkspaceAliasConditionConfig,
 	WorkspaceEntityTypeConditionConfig,
@@ -15,7 +14,16 @@ import type { UmbDocumentUserPermissionConditionConfig } from '@umbraco-cms/back
 Are there any other way we can do this?
 Niels: Sadly I don't see any other solutions currently. But are very open for ideas :-) now that I think about it maybe there is some ability to extend a global type, similar to the 'declare global' trick we use on Elements.
 */
+
+// temp location to avoid circular dependencies
+export type BlockWorkspaceHasSettingsConditionConfig =
+	UmbConditionConfigBase<'Umb.Condition.BlockWorkspaceHasSettings'>;
+
+export type BlockEntryShowContentEditConditionConfig =
+	UmbConditionConfigBase<'Umb.Condition.BlockEntryShowContentEdit'>;
+
 export type ConditionTypes =
+	| BlockEntryShowContentEditConditionConfig
 	| BlockWorkspaceHasSettingsConditionConfig
 	| CollectionAliasConditionConfig
 	| CollectionBulkActionPermissionConditionConfig

src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-history.element.ts

@@ -18,6 +18,7 @@ import type { AuditLogWithUsernameResponseModel } from '@umbraco-cms/backoffice/
 import { DirectionModel } from '@umbraco-cms/backoffice/external/backend-api';
 import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
 import { UMB_NOTIFICATION_CONTEXT } from '@umbraco-cms/backoffice/notification';
+import { UMB_APP_CONTEXT } from '@umbraco-cms/backoffice/app';
 
 @customElement('umb-document-workspace-view-info-history')
 export class UmbDocumentWorkspaceViewInfoHistoryElement extends UmbLitElement {
@@ -36,9 +37,16 @@ export class UmbDocumentWorkspaceViewInfoHistoryElement extends UmbLitElement {
 	@state()
 	private _currentPage = 1;
 
+	@state()
+	private _serverUrl = '';
+
 	constructor() {
 		super();
 		this.#logRepository = new UmbAuditLogRepository(this);
+
+		this.consumeContext(UMB_APP_CONTEXT, (instance) => {
+			this._serverUrl = instance.getServerUrl();
+		});
 	}
 
 	protected firstUpdated(): void {
@@ -127,12 +135,18 @@ export class UmbDocumentWorkspaceViewInfoHistoryElement extends UmbLitElement {
 						(item) => item.timestamp,
 						(item) => {
 							const { text, style } = HistoryTagStyleAndText(item.logType);
+							const avatar = Array.isArray(item.userAvatars) ? item.userAvatars[1] : undefined;
+							// TODO: we need to get the absolute url for the avatars from the server
+							const avatarUrl = avatar ? `${this._serverUrl}${avatar}` : undefined;
+
 							return html`<umb-history-item
 								.name=${item.userName ?? 'Unknown'}
-								src=${ifDefined(
-									Array.isArray(item.userAvatars) ? item.userAvatars[item.userAvatars.length - 1] : undefined,
-								)}
 								detail=${this.localize.date(item.timestamp, TimeOptions)}>
+								<uui-avatar
+									slot="avatar"
+									.name="${item.userName ?? 'Unknown'}"
+									img-src=${ifDefined(avatarUrl)}></uui-avatar>
+
 								<span class="log-type">
 									<uui-tag look=${style.look} color=${style.color}> ${this.localize.term(text.label)} </uui-tag>
 									${this.localize.term(text.desc, item.parameters)}

src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/views/info/media-workspace-view-info-history.element.ts

@@ -15,6 +15,7 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import type { AuditLogWithUsernameResponseModel } from '@umbraco-cms/backoffice/external/backend-api';
 import { DirectionModel } from '@umbraco-cms/backoffice/external/backend-api';
+import { UMB_APP_CONTEXT } from '@umbraco-cms/backoffice/app';
 
 @customElement('umb-media-workspace-view-info-history')
 export class UmbMediaWorkspaceViewInfoHistoryElement extends UmbLitElement {
@@ -33,9 +34,16 @@ export class UmbMediaWorkspaceViewInfoHistoryElement extends UmbLitElement {
 	@state()
 	private _currentPage = 1;
 
+	@state()
+	private _serverUrl = '';
+
 	constructor() {
 		super();
 		this.#logRepository = new UmbAuditLogRepository(this);
+
+		this.consumeContext(UMB_APP_CONTEXT, (instance) => {
+			this._serverUrl = instance.getServerUrl();
+		});
 	}
 
 	protected firstUpdated(): void {
@@ -104,12 +112,16 @@ export class UmbMediaWorkspaceViewInfoHistoryElement extends UmbLitElement {
 						(item) => item.timestamp,
 						(item) => {
 							const { text, style } = HistoryTagStyleAndText(item.logType);
+							const avatar = Array.isArray(item.userAvatars) ? item.userAvatars[1] : undefined;
+							// TODO: we need to get the absolute url for the avatars from the server
+							const avatarUrl = avatar ? `${this._serverUrl}${avatar}` : undefined;
 							return html`<umb-history-item
 								.name=${item.userName ?? 'Unknown'}
-								src=${ifDefined(
-									Array.isArray(item.userAvatars) ? item.userAvatars[item.userAvatars.length - 1] : undefined,
-								)}
 								detail=${this.localize.date(item.timestamp, TimeOptions)}>
+								<uui-avatar
+									slot="avatar"
+									.name="${item.userName ?? 'Unknown'}"
+									img-src=${ifDefined(avatarUrl)}></uui-avatar>
 								<span class="log-type">
 									<uui-tag look=${style.look} color=${style.color}> ${this.localize.term(text.label)} </uui-tag>
 									${this.localize.term(text.desc, item.parameters)}

src/Umbraco.Web.UI.Client/src/packages/property-editors/collection-view/config/column/column-configuration.element.ts

@@ -1,14 +1,17 @@
 import type { UmbCollectionColumnConfiguration } from '../../../../core/collection/types.js';
+import type { UmbInputContentTypePropertyElement } from './components/input-content-type-property/index.js';
 import { css, customElement, html, nothing, property, repeat, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor';
 import { UmbSorterController } from '@umbraco-cms/backoffice/sorter';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import type { UmbInputContentTypePropertyElement } from '@umbraco-cms/backoffice/components';
 import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
 import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
 import type { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
 
+// import of local components
+import './components/input-content-type-property/index.js';
+
 /**
  * @element umb-property-editor-ui-collection-view-column-configuration
  */

src/Umbraco.Web.UI.Client/src/packages/templating/modals/templating-page-field-builder/templating-page-field-builder-modal.element.ts

@@ -3,12 +3,15 @@ import type {
 	UmbTemplatingPageFieldBuilderModalData,
 	UmbTemplatingPageFieldBuilderModalValue,
 } from './templating-page-field-builder-modal.token.js';
+import type { UmbFieldDropdownListElement } from './components/field-dropdown-list/index.js';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
-import type { UmbFieldDropdownListElement } from '@umbraco-cms/backoffice/components';
 import type { UUIBooleanInputEvent, UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
 
+// import of local components
+import './components/field-dropdown-list/index.js';
+
 @customElement('umb-templating-page-field-builder-modal')
 export class UmbTemplatingPageFieldBuilderModalElement extends UmbModalBaseElement<
 	UmbTemplatingPageFieldBuilderModalData,