@openui5/sap.ui.rta 1.120.6 → 1.121.0

package/src/sap/ui/rta/util/changeVisualization/ChangeIndicator.js

@@ -17,7 +17,8 @@ sap.ui.define([
 	"sap/ui/model/json/JSONModel",
 	"sap/ui/rta/util/changeVisualization/commands/getCommandVisualization",
 	"sap/ui/rta/util/changeVisualization/ChangeCategories",
-	"sap/ui/rta/util/changeVisualization/ChangeVisualizationUtils"
+	"sap/ui/rta/util/changeVisualization/ChangeVisualizationUtils",
+	"sap/ui/dt/OverlayRegistry"
 ], function(
 	DateFormat,
 	Control,
@@ -31,7 +32,8 @@ sap.ui.define([
 	JSONModel,
 	getCommandVisualization,
 	ChangeCategories,
-	ChangeVisualizationUtils
+	ChangeVisualizationUtils,
+	OverlayRegistry
 ) {
 	"use strict";
 
@@ -44,10 +46,10 @@ sap.ui.define([
 	 * @alias sap.ui.rta.util.changeVisualization.ChangeIndicator
 	 * @author SAP SE
 	 * @since 1.84.0
-	 * @version 1.120.6
+	 * @version 1.121.0
 	 * @private
 	 */
-	var ChangeIndicator = Control.extend("sap.ui.rta.util.changeVisualization.ChangeIndicator", {
+	const ChangeIndicator = Control.extend("sap.ui.rta.util.changeVisualization.ChangeIndicator", {
 		metadata: {
 			library: "sap.ui.rta",
 			properties: {
@@ -81,6 +83,12 @@ sap.ui.define([
 				 */
 				selectorId: {
 					type: "string"
+				},
+				/**
+				 * ID of the element that is connected to the corresponding indicator element (e.g. section/anchor bar)
+				 */
+				connectedElementId: {
+					type: "string"
 				}
 			},
 			aggregations: {
@@ -121,7 +129,7 @@ sap.ui.define([
 				oRm.openStart("div", oControl);
 				oRm.class("sapUiRtaChangeIndicator");
 				oRm.class("sapUiRtaChangeIndicatorChange");
-				var sTooltip = oControl.getTooltip_AsString();
+				const sTooltip = oControl.getTooltip_AsString();
 				if (sTooltip) {
 					oRm.attr("title", sTooltip);
 				}
@@ -153,6 +161,9 @@ sap.ui.define([
 			// is needed to prevent that multiple events listeners are attached
 			// to the same overlay because setVisible is called multiple times
 			this._bEventAttachedToElement = false;
+			this._oRenderPromise = new Promise((resolve) => {
+				this._fnRendered = resolve;
+			});
 		}
 	});
 
@@ -162,19 +173,24 @@ sap.ui.define([
 		oOverlay[sEventHandler]("keydown", this._onKeyDown, this);
 		oOverlay[sEventHandler]("mouseover", this._fnHoverTrue);
 		oOverlay[sEventHandler]("focusin", this._fnHoverTrue);
+		oOverlay[sEventHandler]("mouseout", this._fnHoverFalse);
+		oOverlay[sEventHandler]("focusout", this._fnHoverFalse);
 	}
 
-	// Hover/focus events are handled by the ChangeVisualization (because it can affect multiple indicators at once)
 	function handleBrowserEventsOnIndicator(oIndicator, sEventHandler) {
 		oIndicator[sEventHandler]("click", this._onSelect, this);
 		oIndicator[sEventHandler]("tap", this._onSelect, this);
 		oIndicator[sEventHandler]("keydown", this._onKeyDown, this);
+		oIndicator[sEventHandler]("mouseover", this._fnHoverTrue);
+		oIndicator[sEventHandler]("focusin", this._fnHoverTrue);
+		oIndicator[sEventHandler]("mouseout", this._fnHoverFalse);
+		oIndicator[sEventHandler]("focusout", this._fnHoverFalse);
 	}
 
 	function centerVertically(oIndicator) {
-		var oIndicatorDomRef = oIndicator.getDomRef();
-		var iOverlayHeight = Element.getElementById(oIndicator.getOverlayId()).getDomRef().offsetHeight;
-		var iIndicatorHeight = oIndicatorDomRef.offsetHeight;
+		const oIndicatorDomRef = oIndicator.getDomRef();
+		const iOverlayHeight = Element.getElementById(oIndicator.getOverlayId()).getDomRef().offsetHeight;
+		const iIndicatorHeight = oIndicatorDomRef.offsetHeight;
 		// the indicator should be centered only if the element has a small enough height to improve the design and visibility
 		if (iOverlayHeight < iIndicatorHeight * 5) {
 			oIndicator.addStyleClass("sapUiRtaChangeIndicatorVerticallyCentered");
@@ -184,25 +200,25 @@ sap.ui.define([
 	}
 
 	function getTexts(mChangeInformation, oRtaResourceBundle, sOverlayId) {
-		var oAffectedElement = Element.getElementById(mChangeInformation.affectedElementId);
-		var mDescriptionPayload = Object.keys(mChangeInformation.descriptionPayload || {}).reduce(function(mDescriptionPayload, sKey) {
-			var vOriginalValue = mChangeInformation.descriptionPayload[sKey];
-			var bIsBinding = FlUtils.isBinding(vOriginalValue);
-			var vValue = bIsBinding
+		const oAffectedElement = Element.getElementById(mChangeInformation.affectedElementId);
+		const mDescriptionPayload = Object.keys(mChangeInformation.descriptionPayload || {}).reduce(function(mDescriptionPayload, sKey) {
+			const vOriginalValue = mChangeInformation.descriptionPayload[sKey];
+			const bIsBinding = FlUtils.isBinding(vOriginalValue);
+			const vValue = bIsBinding
 				? resolveBinding(vOriginalValue, oAffectedElement)
 				: vOriginalValue;
 			mDescriptionPayload[sKey] = vValue;
 			return mDescriptionPayload;
 		}, {});
 
-		var mPropertyBag = { appComponent: FlUtils.getAppComponentForControl(oAffectedElement) };
-		var oOverlay = Element.getElementById(sOverlayId);
-		var sElementLabel = oOverlay.getDesignTimeMetadata().getLabel(oAffectedElement);
-		var oCommandVisualization = getCommandVisualization(mChangeInformation);
-		var oDescription = oCommandVisualization && oCommandVisualization.getDescription(mDescriptionPayload, sElementLabel, mPropertyBag) || {};
-		var sCommandName = mChangeInformation.commandName;
-		var sDescriptionText;
-		var sDescriptionTooltip;
+		const mPropertyBag = { appComponent: FlUtils.getAppComponentForControl(oAffectedElement) };
+		const oOverlay = Element.getElementById(sOverlayId);
+		const sElementLabel = oOverlay.getDesignTimeMetadata().getLabel(oAffectedElement);
+		const oCommandVisualization = getCommandVisualization(mChangeInformation);
+		const oDescription = oCommandVisualization?.getDescription(mDescriptionPayload, sElementLabel, mPropertyBag) || {};
+		let sCommandName = mChangeInformation.commandName;
+		let sDescriptionText;
+		let sDescriptionTooltip;
 
 		// 'Settings' with a custom description should overwrite the description from the CommandVisualization
 		if (sCommandName === "settings" && mDescriptionPayload.description) {
@@ -217,8 +233,8 @@ sap.ui.define([
 			sDescriptionText = oDescription.descriptionText;
 			sDescriptionTooltip = oDescription.descriptionTooltip || "";
 		} else {
-			var sShortenedElementLabel = ChangeVisualizationUtils.shortenString(sElementLabel);
-			var sChangeTextKey = (
+			const sShortenedElementLabel = ChangeVisualizationUtils.shortenString(sElementLabel);
+			const sChangeTextKey = (
 				`TXT_CHANGEVISUALIZATION_CHANGE_${
 				 sCommandName.toUpperCase()}`
 			);
@@ -226,8 +242,8 @@ sap.ui.define([
 			sDescriptionTooltip = oRtaResourceBundle.getText(sChangeTextKey, [sElementLabel]);
 		}
 		sDescriptionTooltip = sDescriptionText.length < sDescriptionTooltip.length ? sDescriptionTooltip : null;
-		var sDetailButtonText = oDescription && oDescription.buttonText;
-		var sIconTooltip = oRtaResourceBundle.getText(
+		const sDetailButtonText = oDescription && oDescription.buttonText;
+		const sIconTooltip = oRtaResourceBundle.getText(
 			`TXT_CHANGEVISUALIZATION_OVERVIEW_${
 			 mChangeInformation.changeCategory.toUpperCase()}`
 		);
@@ -241,9 +257,9 @@ sap.ui.define([
 	}
 
 	function getDates(mChangeInformation, oRtaResourceBundle) {
-		var sCreationDate = mChangeInformation.change.getCreation();
-		var oDate = new Date(sCreationDate);
-		var sFallbackDate = oRtaResourceBundle.getText("TXT_CHANGEVISUALIZATION_CREATED_IN_SESSION_DATE");
+		const sCreationDate = mChangeInformation.change.getCreation();
+		const oDate = new Date(sCreationDate);
+		const sFallbackDate = oRtaResourceBundle.getText("TXT_CHANGEVISUALIZATION_CREATED_IN_SESSION_DATE");
 
 		return {
 			fullDate: sCreationDate ? DateFormat.getDateTimeInstance().format(oDate) : sFallbackDate,
@@ -252,9 +268,9 @@ sap.ui.define([
 	}
 
 	function formatChangesModelItem(sOverlayId, mChangeInformation) {
-		var oRtaResourceBundle = Lib.getResourceBundleFor("sap.ui.rta");
-		var oTexts = getTexts(mChangeInformation, oRtaResourceBundle, sOverlayId);
-		var oDates = getDates(mChangeInformation, oRtaResourceBundle);
+		const oRtaResourceBundle = Lib.getResourceBundleFor("sap.ui.rta");
+		const oTexts = getTexts(mChangeInformation, oRtaResourceBundle, sOverlayId);
+		const oDates = getDates(mChangeInformation, oRtaResourceBundle);
 
 		return {
 			id: mChangeInformation.id,
@@ -277,7 +293,7 @@ sap.ui.define([
 	ChangeIndicator.prototype.setVisible = function(...aArgs) {
 		const [bVisible] = aArgs;
 		Control.prototype.setVisible.apply(this, aArgs);
-		var oOverlay = Element.getElementById(this.getOverlayId());
+		const oOverlay = Element.getElementById(this.getOverlayId());
 		// needed because the change indicator cleanup is only triggered on save and exit
 		if (oOverlay) {
 			if (bVisible && !this._bEventAttachedToElement) {
@@ -290,6 +306,10 @@ sap.ui.define([
 				if (this.getAggregation("_popover")) {
 					this.getAggregation("_popover").destroy();
 				}
+				// Reset the render promise
+				this._oRenderPromise = new Promise((resolve) => {
+					this._fnRendered = resolve;
+				});
 			}
 		}
 		return this;
@@ -312,7 +332,7 @@ sap.ui.define([
 		// indicator is not rendered yet or that the old overlay and thus the nested indicator were destroyed
 		// To properly render it, the indicator must temporarily be placed in the static area
 		// Once it is rendered, it can move itself to the actual overlay dom ref (see onAfterRendering)
-		var oDomRef = this.getDomRef();
+		const oDomRef = this.getDomRef();
 		if (oDomRef) {
 			oDomRef.parentNode.removeChild(oDomRef);
 		}
@@ -323,7 +343,7 @@ sap.ui.define([
 	};
 
 	ChangeIndicator.prototype.onAfterRendering = function() {
-		var oOverlay = Element.getElementById(this.getOverlayId());
+		const oOverlay = Element.getElementById(this.getOverlayId());
 		if (oOverlay) {
 			// Attach to the overlay
 			oOverlay.getDomRef().appendChild(this.getDomRef());
@@ -337,11 +357,21 @@ sap.ui.define([
 			this.focus();
 			this._setHoverStyleClasses(true);
 		}
+		// Resolve the rendering promise
+		this._fnRendered();
+	};
+
+	/**
+	 * Waits for the indicator to be rendered.
+	 * @returns {Promise} Resolves when the indicator is rendered
+	 */
+	ChangeIndicator.prototype.waitForRendering = function() {
+		return this._oRenderPromise;
 	};
 
 	ChangeIndicator.prototype.exit = function() {
-		var oDomRef = this.getDomRef();
-		var oOverlay = Element.getElementById(this.getOverlayId());
+		const oDomRef = this.getDomRef();
+		const oOverlay = Element.getElementById(this.getOverlayId());
 		if (oDomRef) {
 			oDomRef.parentNode.removeChild(oDomRef);
 		}
@@ -355,9 +385,15 @@ sap.ui.define([
 	};
 
 	ChangeIndicator.prototype.setChanges = function(aChanges) {
-		var oRtaResourceBundle = Lib.getResourceBundleFor("sap.ui.rta");
+		const oRtaResourceBundle = Lib.getResourceBundleFor("sap.ui.rta");
 		this.setProperty("changes", aChanges);
-		this._oDetailModel.setData((aChanges || []).reverse().map(formatChangesModelItem.bind(this, this.getOverlayId())));
+		const aSortedChanges = aChanges
+			? aChanges.sort(
+				(a, b) => new Date(a.change.getCreation() || new Date()) - new Date(b.change.getCreation() || new Date())
+			).reverse()
+			: [];
+		const aFormattedChanges = (aSortedChanges).map(formatChangesModelItem.bind(this, this.getOverlayId()));
+		this._oDetailModel.setData(aFormattedChanges);
 		if (aChanges && aChanges.length === 1) {
 			this.setTooltip(oRtaResourceBundle.getText("TXT_CHANGEVISUALIZATION_INDICATOR_TOOLTIP_SING"));
 		} else if (aChanges) {
@@ -393,14 +429,23 @@ sap.ui.define([
 		this._setHoverStyleClasses(bAdd);
 	};
 
-	ChangeIndicator.prototype._setHoverStyleClasses = function(bAdd) {
-		var oOverlay = Element.getElementById(this.getOverlayId());
+	ChangeIndicator.prototype._setHoverStyleClasses = function(bAdd, oEvent) {
+		if (oEvent) {
+			oEvent.stopPropagation();
+			oEvent.preventDefault();
+		}
+		const oOverlay = Element.getElementById(this.getOverlayId());
 		if (oOverlay.getMetadata().getName() !== "sap.ui.dt.ElementOverlay") {
 			return;
 		}
-		var sFunctionName = bAdd ? "addStyleClass" : "removeStyleClass";
+
+		const sFunctionName = bAdd ? "addStyleClass" : "removeStyleClass";
 		oOverlay[sFunctionName]("sapUiRtaChangeIndicatorHovered");
 		this[sFunctionName]("sapUiRtaHover");
+		if (this.getConnectedElementId()) {
+			const oConnectedElementOverlay = OverlayRegistry.getOverlay(this.getConnectedElementId());
+			oConnectedElementOverlay[sFunctionName]("sapUiRtaChangeIndicatorHovered");
+		}
 	};
 
 	ChangeIndicator.prototype._toggleDetailPopover = function() {
@@ -416,21 +461,21 @@ sap.ui.define([
 				this.setAggregation("_popover", oPopover);
 				oPopover.setModel(this._oDetailModel, "details");
 				oPopover.openBy(this);
-				this.fireDetailPopoverOpened();
+				this._setHoverStyleClasses(true);
 			}.bind(this));
 		} else {
 			if (this.getAggregation("_popover").isOpen()) {
 				return this.getAggregation("_popover").close();
 			}
 			this.getAggregation("_popover").openBy(this);
-			this.fireDetailPopoverOpened();
+			this._setHoverStyleClasses(true);
 		}
 		return undefined;
 	};
 
 	ChangeIndicator.prototype._showDependentElements = function(oEvent) {
 		this.getAggregation("_popover").close();
-		var sChangeId = this.getChanges().length > 1
+		const sChangeId = this.getChanges().length > 1
 			? oEvent.getSource().getBindingContext("details").getObject().id
 			: this.getChanges()[0].id;
 		this.fireSelectChange({

package/src/sap/ui/rta/util/changeVisualization/ChangeIndicatorRegistry.js

@@ -5,7 +5,6 @@
  */
 
 sap.ui.define([
-	"sap/base/util/includes",
 	"sap/base/util/values",
 	"sap/base/util/restricted/_omit",
 	"sap/base/Log",
@@ -17,7 +16,6 @@ sap.ui.define([
 	"sap/ui/fl/changeHandler/common/ChangeCategories",
 	"sap/ui/rta/util/changeVisualization/ChangeStates"
 ], function(
-	includes,
 	values,
 	_omit,
 	Log,
@@ -39,10 +37,10 @@ sap.ui.define([
 	 * @alias sap.ui.rta.util.changeVisualization.ChangeIndicatorRegistry
 	 * @author SAP SE
 	 * @since 1.86.0
-	 * @version 1.120.6
+	 * @version 1.121.0
 	 * @private
 	 */
-	var ChangeIndicatorRegistry = ManagedObject.extend("sap.ui.rta.util.changeVisualization.ChangeIndicatorRegistry", {
+	const ChangeIndicatorRegistry = ManagedObject.extend("sap.ui.rta.util.changeVisualization.ChangeIndicatorRegistry", {
 		metadata: {
 			properties: {
 				/**
@@ -113,8 +111,8 @@ sap.ui.define([
 	 * @returns {object} List of selectors with change indicator data.
 	 */
 	ChangeIndicatorRegistry.prototype.getSelectorsWithRegisteredChanges = function() {
-		var oChangeIndicators = {};
-		var sPreviousAffectedElementId;
+		const oChangeIndicators = {};
+		let sPreviousAffectedElementId;
 
 		function addSelector(sSelectorId, sAffectedElementId, oChangeIndicatorData, bDependent) {
 			if (oChangeIndicators[sSelectorId] === undefined) {
@@ -145,10 +143,10 @@ sap.ui.define([
 	};
 
 	ChangeIndicatorRegistry.prototype.getRelevantChangesWithSelector = function() {
-		var oSelectors = this.getSelectorsWithRegisteredChanges();
-		var aRelevantChanges = [];
+		const oSelectors = this.getSelectorsWithRegisteredChanges();
+		let aRelevantChanges = [];
 		Object.keys(oSelectors).forEach(function(sSelectorId) {
-			var aRelevantChangesForSelector = oSelectors[sSelectorId].filter(function(oChange) {
+			const aRelevantChangesForSelector = oSelectors[sSelectorId].filter(function(oChange) {
 				return !oChange.dependent;
 			});
 			aRelevantChanges = aRelevantChanges.concat(aRelevantChangesForSelector);
@@ -184,21 +182,21 @@ sap.ui.define([
 	 * @returns {Promise<undefined>} Resolves as soon as the change is registered
 	 */
 	ChangeIndicatorRegistry.prototype.registerChange = function(oChange, sCommandName, oVersionsModel) {
-		var oAppComponent = FlUtils.getAppComponentForControl(ElementUtil.getElementInstance(this.getRootControlId()));
+		const oAppComponent = FlUtils.getAppComponentForControl(ElementUtil.getElementInstance(this.getRootControlId()));
 		return getVisualizationInfo(oChange, oAppComponent).then(function(mChangeVisualizationInfo) {
-			var aCategories = this.getChangeCategories();
-			var sChangeCategory;
+			const aCategories = this.getChangeCategories();
+			let sChangeCategory;
 			// For "settings", the control developer can choose one of the existing categories
-			if (sCommandName === "settings" && includes(Object.keys(aCategories), mChangeVisualizationInfo.descriptionPayload.category)) {
+			if (sCommandName === "settings" && Object.keys(aCategories).includes(mChangeVisualizationInfo.descriptionPayload.category)) {
 				sChangeCategory = mChangeVisualizationInfo.descriptionPayload.category;
 			} else {
 				sChangeCategory = Object.keys(aCategories).find(function(sChangeCategoryName) {
-					return includes(aCategories[sChangeCategoryName], sCommandName);
+					return aCategories[sChangeCategoryName].includes(sCommandName);
 				});
 				sChangeCategory ||= ChangeCategories.OTHER;
 			}
-			var aChangeStates;
-			var aDraftChangesList = [];
+			let aChangeStates;
+			let aDraftChangesList = [];
 			if (oVersionsModel) {
 				aDraftChangesList = oVersionsModel.getData().draftFilenames;
 			}
@@ -228,7 +226,7 @@ sap.ui.define([
 			}
 			return aSelectorList
 			.map(function(vSelector) {
-				var oElement = typeof vSelector.getId === "function"
+				const oElement = typeof vSelector.getId === "function"
 					? vSelector
 					: JsControlTreeModifier.bySelector(vSelector, oAppComponent);
 				return oElement && oElement.getId();
@@ -238,13 +236,13 @@ sap.ui.define([
 
 		return getInfoFromChangeHandler(oAppComponent, oChange)
 		.then(function(oInfoFromChangeHandler) {
-			var mVisualizationInfo = oInfoFromChangeHandler || {};
-			var aChangeSelectors = oChange.getSelector && oChange.getSelector() && [oChange.getSelector()];
-			var aAffectedElementSelectors = mVisualizationInfo.affectedControls || aChangeSelectors || [];
+			const mVisualizationInfo = oInfoFromChangeHandler || {};
+			const aChangeSelectors = oChange.getSelector && oChange.getSelector() && [oChange.getSelector()];
+			const aAffectedElementSelectors = mVisualizationInfo.affectedControls || aChangeSelectors || [];
 			// If there is an original selector (e.g. control is inside a template),
 			// the indicator should be displayed on the host control (change selector)
-			var oChangeOriginalSelector = oChange.getOriginalSelector && oChange.getOriginalSelector();
-			var aDisplayElementSelectors = oChangeOriginalSelector ? aChangeSelectors : aAffectedElementSelectors;
+			const oChangeOriginalSelector = oChange.getOriginalSelector && oChange.getOriginalSelector();
+			const aDisplayElementSelectors = oChangeOriginalSelector ? aChangeSelectors : aAffectedElementSelectors;
 
 			return {
 				affectedElementIds: getSelectorIds(aAffectedElementSelectors),
@@ -257,9 +255,9 @@ sap.ui.define([
 	}
 
 	function getInfoFromChangeHandler(oAppComponent, oChange) {
-		var oSelector = oChange.getOriginalSelector && oChange.getOriginalSelector();
+		let oSelector = oChange.getOriginalSelector && oChange.getOriginalSelector();
 		oSelector ||= oChange.getSelector && oChange.getSelector();
-		var oControl = JsControlTreeModifier.bySelector(oSelector, oAppComponent);
+		const oControl = JsControlTreeModifier.bySelector(oSelector, oAppComponent);
 		if (oControl) {
 			return ChangesWriteAPI.getChangeHandler({
 				changeType: oChange.getChangeType(),
@@ -295,6 +293,14 @@ sap.ui.define([
 		this._oChangeIndicators[sSelectorId] = oChangeIndicator;
 	};
 
+	/**
+	 * Waits for the registered indicators to be rendered.
+	 * @returns {Promise} Resolves when all registered indicators are rendered.
+	 */
+	ChangeIndicatorRegistry.prototype.waitForIndicatorRendering = function() {
+		return Promise.all(this.getChangeIndicators().map((oIndicator) => oIndicator.waitForRendering()));
+	};
+
 	/**
 	 * Resets the change and change indicator registries.
 	 */
@@ -320,7 +326,8 @@ sap.ui.define([
 
 	/**
 	 * Removes changes with the updateRequired flag from the registry so the change can be re-registered and
-	 * the visualizationInfo is updated => if an element has an unstable id this updates the id information in the registry (e.g simple forms)
+	 * the visualizationInfo is updated => if an element has an unstable id this updates the id information
+	 * in the registry (e.g simple forms)
 	 */
 	ChangeIndicatorRegistry.prototype.removeOutdatedRegisteredChanges = function() {
 		this.getAllRegisteredChanges().forEach(function(oChange) {