Merge pull request #1719 from umbraco/bugfix/remove-history-item-circular-dependency

Bugfix: Remove History Item circular dependency

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/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/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)}