From 237e549c9fd7de89f3096269f9473c2d065f1ba9 Mon Sep 17 00:00:00 2001
From: Dobromira Boycheva <dobromira.boycheva@sap.com>
Date: Wed, 22 Jan 2025 11:33:50 +0200
Subject: [PATCH] feat(ui5-user-menu): add a property to hide avatar icon for
 editing

---
 packages/fiori/cypress/specs/UserMenu.cy.ts | 20 ++++++++++++++++++++
 packages/fiori/src/UserMenu.ts              | 10 ++++++++++
 packages/fiori/src/UserMenuTemplate.tsx     |  2 ++
 3 files changed, 32 insertions(+)

diff --git a/packages/fiori/cypress/specs/UserMenu.cy.ts b/packages/fiori/cypress/specs/UserMenu.cy.ts
index 755a5c602643..45e30021731c 100644
--- a/packages/fiori/cypress/specs/UserMenu.cy.ts
+++ b/packages/fiori/cypress/specs/UserMenu.cy.ts
@@ -169,6 +169,8 @@ describe("Avatar configuration", () => {
 		cy.get("@avatar").should("exist");
 		cy.get("@avatar").should("have.length", 1);
 		cy.get("@avatar").should("have.attr", "fallback-icon", "person-placeholder");
+		cy.get("@avatar").find("[ui5-tag]").should("exist");
+		cy.get("@avatar").find("[ui5-tag]").should("have.length", 1);
 	});
 
 	it("tests initials", () => {
@@ -208,6 +210,24 @@ describe("Avatar configuration", () => {
 		cy.get("@image").should("have.length", 1);
 		cy.get("@image").should("have.attr", "src", "./../../test/pages/img/man_avatar_1.png");
 	});
+
+	it("tests hideEditAvatar", () => {
+		cy.mount(html`<ui5-button id="openUserMenuBtn">Open User Menu</ui5-button>
+		<ui5-user-menu open opener="openUserMenuBtn" hide-edit-avatar>
+			<ui5-user-menu-account slot="accounts"
+								   title-text="Alain Chevalier 1"
+								   subtitle-text="alian.chevalier@sap.com"
+								   description="Delivery Manager, SAP SE">
+			</ui5-user-menu-account>
+		</ui5-user-menu>`);
+		cy.get("[ui5-user-menu]").as("userMenu");
+		cy.get("@userMenu").should("exist");
+		cy.get("@userMenu").shadow().find("[ui5-avatar]").as("avatar");
+		cy.get("@avatar").should("exist");
+		cy.get("@avatar").should("have.length", 1);
+		cy.get("@avatar").should("have.attr", "fallback-icon", "person-placeholder");
+		cy.get("@avatar").find("[ui5-tag]").should("have.length", 0);
+	});
 });
 
 describe("Events", () => {
diff --git a/packages/fiori/src/UserMenu.ts b/packages/fiori/src/UserMenu.ts
index 5d56aede2716..e27de372c50f 100644
--- a/packages/fiori/src/UserMenu.ts
+++ b/packages/fiori/src/UserMenu.ts
@@ -183,6 +183,16 @@ class UserMenu extends UI5Element {
 	@property({ type: Boolean })
 	showAddAccount = false;
 
+	/**
+	 * Defines if the User menu avatar edit button should be hidden.
+	 *
+	 * @default false
+	 * @public
+	 * @since 2.7.0
+	 */
+	@property({ type: Boolean })
+	hideEditAvatar = false;
+
 	/**
 	 * Defines the menu items.
 	 * @public
diff --git a/packages/fiori/src/UserMenuTemplate.tsx b/packages/fiori/src/UserMenuTemplate.tsx
index ff87347b8ad1..72fbc1e5bc33 100644
--- a/packages/fiori/src/UserMenuTemplate.tsx
+++ b/packages/fiori/src/UserMenuTemplate.tsx
@@ -136,9 +136,11 @@ function headerContent(this: UserMenu) {
 					{this._selectedAccount.avatarSrc &&
 						<img src={this._selectedAccount.avatarSrc}/>
 					}
+					{this.hideEditAvatar != true &&
 					<Tag slot="badge" wrappingType="None" design="Set1" colorScheme="5" title={this._editAvatarTooltip}>
 						<Icon slot="icon" name={edit}></Icon>
 					</Tag>
+					}
 				</Avatar>
 				{this._selectedAccount.titleText &&
 					<Title id="selected-account-title" class="ui5-pm-selected-account-title">{this._selectedAccount.titleText}</Title>