@openui5/sap.ui.rta 1.105.1 → 1.107.0

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

@@ -18,7 +18,8 @@ sap.ui.define([
 	"sap/ui/model/resource/ResourceModel",
 	"sap/ui/model/json/JSONModel",
 	"sap/ui/rta/util/changeVisualization/ChangeIndicator",
-	"sap/ui/rta/util/changeVisualization/ChangeIndicatorRegistry"
+	"sap/ui/rta/util/changeVisualization/ChangeIndicatorRegistry",
+	"sap/ui/rta/util/changeVisualization/ChangeCategories"
 ], function(
 	Fragment,
 	difference,
@@ -33,42 +34,11 @@ sap.ui.define([
 	ResourceModel,
 	JSONModel,
 	ChangeIndicator,
-	ChangeIndicatorRegistry
+	ChangeIndicatorRegistry,
+	ChangeCategories
 ) {
 	"use strict";
 
-	var VALID_COMMANDS = {
-		add: [
-			"createContainer",
-			"addDelegateProperty",
-			"reveal",
-			"addIFrame"
-		],
-		move: [
-			"move"
-		],
-		rename: [
-			"rename"
-		],
-		combinesplit: [
-			"combine",
-			"split"
-		],
-		remove: [
-			"remove"
-		]
-	};
-	var CATEGORY_ALL = "all";
-
-	var CATEGORY_ICONS = {
-		all: "sap-icon://show",
-		add: "sap-icon://add",
-		move: "sap-icon://move",
-		rename: "sap-icon://edit",
-		combinesplit: "sap-icon://combine",
-		remove: "sap-icon://less"
-	};
-
 	/**
 	 * When clicking anywhere on the application, the menu must close
 	 */
@@ -87,7 +57,7 @@ sap.ui.define([
 	 * @alias sap.ui.rta.util.changeVisualization.ChangeVisualization
 	 * @author SAP SE
 	 * @since 1.84.0
-	 * @version 1.105.1
+	 * @version 1.107.0
 	 * @private
 	 */
 	var ChangeVisualization = Control.extend("sap.ui.rta.util.changeVisualization.ChangeVisualization", {
@@ -117,7 +87,7 @@ sap.ui.define([
 		},
 		constructor: function() {
 			this._oChangeIndicatorRegistry = new ChangeIndicatorRegistry({
-				commandCategories: VALID_COMMANDS
+				changeCategories: ChangeCategories.getCategories()
 			});
 
 			Control.prototype.constructor.apply(this, arguments);
@@ -131,7 +101,7 @@ sap.ui.define([
 				active: this.getIsActive()
 			});
 			this._oChangeVisualizationModel.setDefaultBindingMode("OneWay");
-			this._sSelectedCommandCategory = "all";
+			this._sSelectedChangeCategory = ChangeCategories.ALL;
 			this._bSetModeChanged = false;
 
 			// For the event handlers to work, the function instance has to remain stable
@@ -176,37 +146,37 @@ sap.ui.define([
 	ChangeVisualization.prototype._updateVisualizationModelMenuData = function() {
 		var aVisualizedChanges = this._oChangeVisualizationModel.getData().visualizedChanges;
 		var aHiddenChanges = [];
-		var aRegisteredChanges = this._oChangeIndicatorRegistry.getChanges();
-		aRegisteredChanges.forEach(function(oChange) {
+		var aAllRegisteredChanges = this._oChangeIndicatorRegistry.getAllRegisteredChanges();
+		aAllRegisteredChanges.forEach(function(oRegisteredChange) {
 			var oVisualizedChange = aVisualizedChanges.find(function(oVisualizedChange) {
-				return oChange.change.getId() === oVisualizedChange.id;
+				return oRegisteredChange.change.getId() === oVisualizedChange.id;
 			});
-			if (!oVisualizedChange && !oChange.dependent) {
-				aHiddenChanges.push(oChange);
+			if (!oVisualizedChange && !oRegisteredChange.dependent) {
+				aHiddenChanges.push(oRegisteredChange);
 			}
 		});
-		var aCommandData = Object.keys(VALID_COMMANDS).map(function(sCommandCategoryName) {
-			var sTitle = this._getCommandCategoryLabel(
-				sCommandCategoryName,
-				this._getChangesForCommandCategory(sCommandCategoryName, aVisualizedChanges).length
+		var aCommandData = Object.keys(ChangeCategories.getCategories()).map(function(sChangeCategoryName) {
+			var sTitle = this._getChangeCategoryLabel(
+				sChangeCategoryName,
+				this._getChangesForChangeCategory(sChangeCategoryName, aVisualizedChanges).length
 			);
 			return {
-				key: sCommandCategoryName,
-				count: this._getChangesForCommandCategory(sCommandCategoryName, aVisualizedChanges).length,
+				key: sChangeCategoryName,
+				count: this._getChangesForChangeCategory(sChangeCategoryName, aVisualizedChanges).length,
 				title: sTitle,
-				icon: CATEGORY_ICONS[sCommandCategoryName]
+				icon: ChangeCategories.getIconForCategory(sChangeCategoryName)
 			};
 		}.bind(this));
 
 		aCommandData.unshift({
-			key: CATEGORY_ALL,
-			count: this._getChangesForCommandCategory(CATEGORY_ALL, aVisualizedChanges).length,
-			title: this._getCommandCategoryLabel(CATEGORY_ALL, this._getChangesForCommandCategory(CATEGORY_ALL, aVisualizedChanges).length),
-			icon: CATEGORY_ICONS[CATEGORY_ALL]
+			key: ChangeCategories.ALL,
+			count: this._getChangesForChangeCategory(ChangeCategories.ALL, aVisualizedChanges).length,
+			title: this._getChangeCategoryLabel(ChangeCategories.ALL, this._getChangesForChangeCategory(ChangeCategories.ALL, aVisualizedChanges).length),
+			icon: ChangeCategories.getIconForCategory(ChangeCategories.ALL)
 		});
 
 		this._updateVisualizationModel({
-			commandCategories: aCommandData,
+			changeCategories: aCommandData,
 			hiddenChanges: aHiddenChanges,
 			popupInfoMessage: this._oTextBundle.getText(
 				"MSG_CHANGEVISUALIZATION_HIDDEN_CHANGES_INFO",
@@ -215,21 +185,21 @@ sap.ui.define([
 		});
 	};
 
-	ChangeVisualization.prototype._getChangesForCommandCategory = function(sCommandCategory, aChanges) {
+	ChangeVisualization.prototype._getChangesForChangeCategory = function(sChangeCategory, aChanges) {
 		return aChanges.filter(function(oChange) {
-			return sCommandCategory === CATEGORY_ALL
-				? oChange.commandCategory !== undefined
-				: sCommandCategory === oChange.commandCategory;
+			return sChangeCategory === ChangeCategories.ALL
+				? oChange.changeCategory !== undefined
+				: sChangeCategory === oChange.changeCategory;
 		});
 	};
 
-	ChangeVisualization.prototype._getCommandCategoryLabel = function(sCommandCategoryName, iChangesCount) {
-		var sLabelKey = "TXT_CHANGEVISUALIZATION_OVERVIEW_" + sCommandCategoryName.toUpperCase();
+	ChangeVisualization.prototype._getChangeCategoryLabel = function(sChangeCategoryName, iChangesCount) {
+		var sLabelKey = "TXT_CHANGEVISUALIZATION_OVERVIEW_" + sChangeCategoryName.toUpperCase();
 		return this._oTextBundle.getText(sLabelKey, [iChangesCount]);
 	};
 
-	ChangeVisualization.prototype._getCommandCategoryButton = function(sCommandCategoryName) {
-		var sButtonKey = "BTN_CHANGEVISUALIZATION_OVERVIEW_" + sCommandCategoryName.toUpperCase();
+	ChangeVisualization.prototype._getChangeCategoryButton = function(sChangeCategoryName) {
+		var sButtonKey = "BTN_CHANGEVISUALIZATION_OVERVIEW_" + sChangeCategoryName.toUpperCase();
 		return this._oTextBundle.getText(sButtonKey);
 	};
 
@@ -263,24 +233,23 @@ sap.ui.define([
 	};
 
 	/**
-	 * Sets the selected command category and visualizes all changes for the given category
+	 * Sets the selected change category and visualizes all changes for the given category
 	 *
 	 * @param {event} oEvent - Event
-	 * @returns {Promise} - Promise of category change
 	 */
-	ChangeVisualization.prototype.onCommandCategorySelection = function(oEvent) {
-		var sSelectedCommandCategory = oEvent.getSource().getBindingContext("visualizationModel").getObject().key;
-		this._selectCommandCategory(sSelectedCommandCategory);
+	ChangeVisualization.prototype.onChangeCategorySelection = function(oEvent) {
+		var sSelectedChangeCategory = oEvent.getSource().getBindingContext("visualizationModel").getObject().key;
+		this._selectChangeCategory(sSelectedChangeCategory);
 	};
 
-	ChangeVisualization.prototype._selectCommandCategory = function(sSelectedCommandCategory) {
-		this._sSelectedCommandCategory = sSelectedCommandCategory;
+	ChangeVisualization.prototype._selectChangeCategory = function(sSelectedChangeCategory) {
+		this._sSelectedChangeCategory = sSelectedChangeCategory;
 
-		var sCommandCategoryText = this._getCommandCategoryButton(sSelectedCommandCategory);
+		var sChangeCategoryText = this._getChangeCategoryButton(sSelectedChangeCategory);
 
 		this._updateVisualizationModel({
-			commandCategory: sSelectedCommandCategory,
-			commandCategoryText: sCommandCategoryText
+			changeCategory: sSelectedChangeCategory,
+			changeCategoryText: sChangeCategoryText
 		});
 
 		this._updateChangeIndicators();
@@ -288,7 +257,7 @@ sap.ui.define([
 	};
 
 	ChangeVisualization.prototype._getCommandForChange = function(oChange) {
-		var sCommand = oChange.getDefinition().support.command;
+		var sCommand = oChange.getSupportInformation().command;
 		if (sCommand) {
 			return sCommand;
 		}
@@ -346,10 +315,13 @@ sap.ui.define([
 
 	ChangeVisualization.prototype._updateChangeRegistry = function() {
 		return this._collectChanges().then(function(aChanges) {
-			var aRegisteredChangeIds = this._oChangeIndicatorRegistry.getChangeIds();
+			this._oChangeIndicatorRegistry.removeOutdatedRegisteredChanges();
+			var aRegisteredChangeIds = this._oChangeIndicatorRegistry.getRegisteredChangeIds();
 			var oCurrentChanges = aChanges
 				.filter(function(oChange) {
-					return oChange.getFileType() === "change";
+					// Filter out changes with different fileTypes (e.g. variant)
+					// or without selectors (e.g. App Descriptor changes)
+					return oChange.getFileType() === "change" && oChange.getSelector();
 				})
 				.reduce(function(oChanges, oChange) {
 					oChanges[oChange.getId()] = oChange;
@@ -359,7 +331,7 @@ sap.ui.define([
 
 			// Remove registered changes which no longer exist
 			difference(aRegisteredChangeIds, aCurrentChangeIds).forEach(function(sChangeIdToRemove) {
-				this._oChangeIndicatorRegistry.removeChange(sChangeIdToRemove);
+				this._oChangeIndicatorRegistry.removeRegisteredChange(sChangeIdToRemove);
 			}.bind(this));
 
 			var aPromises = [];
@@ -379,10 +351,12 @@ sap.ui.define([
 	};
 
 	ChangeVisualization.prototype._selectChange = function(sChangeId) {
-		var aDependentElements = this._oChangeIndicatorRegistry.getChange(sChangeId).visualizationInfo.dependentElementIds;
+		var aDependentElements = this._oChangeIndicatorRegistry.getRegisteredChange(sChangeId).visualizationInfo.dependentElementIds;
 		aDependentElements.forEach(function(sElementId) {
 			var oOverlayDomRef = OverlayRegistry.getOverlay(sElementId).getDomRef();
-			oOverlayDomRef.scrollIntoViewIfNeeded();
+			oOverlayDomRef.scrollIntoView({
+				block: "nearest"
+			});
 			oOverlayDomRef.classList.add("sapUiRtaChangeIndicatorDependent");
 			oOverlayDomRef.addEventListener("animationend", function() {
 				oOverlayDomRef.classList.remove("sapUiRtaChangeIndicatorDependent");
@@ -399,7 +373,7 @@ sap.ui.define([
 	};
 
 	ChangeVisualization.prototype._updateChangeIndicators = function() {
-		var oSelectors = this._oChangeIndicatorRegistry.getChangeIndicatorData();
+		var oSelectors = this._oChangeIndicatorRegistry.getSelectorsWithRegisteredChanges();
 		var oIndicators = {};
 		var aVisualizedChanges = [];
 		Object.keys(oSelectors)
@@ -469,10 +443,10 @@ sap.ui.define([
 		return aChangeVizInfo.filter(function(oChangeVizInfo) {
 			return (
 				!oChangeVizInfo.dependent
-				&& oChangeVizInfo.commandCategory
+				&& oChangeVizInfo.changeCategory
 				&& (
-					oRootData.commandCategory === CATEGORY_ALL
-					|| oRootData.commandCategory === oChangeVizInfo.commandCategory
+					oRootData.changeCategory === ChangeCategories.ALL
+					|| oRootData.changeCategory === oChangeVizInfo.changeCategory
 				)
 			);
 		});
@@ -562,7 +536,7 @@ sap.ui.define([
 		// show all change visualizations at startup
 		this._updateChangeRegistry()
 			.then(function() {
-				this._selectCommandCategory(this._sSelectedCommandCategory);
+				this._selectChangeCategory(this._sSelectedChangeCategory);
 				this._updateVisualizationModelMenuData();
 				oToolbar.setModel(this._oChangeVisualizationModel, "visualizationModel");
 			}.bind(this));

package/src/sap/ui/rta/util/changeVisualization/{categories → commands}/CombineVisualization.js

@@ -25,7 +25,7 @@ sap.ui.define([
 	 * Creates a localized description for combine changes based on the provided
 	 * payload containing the combined elements.
 	 *
-	 * @param {object} mPayload - Change visualization payload from the change handler
+	 * @param {object} mPayload - Change visualization description payload from the change handler
 	 * @param {array.<string>} mPayload.originalSelectors - Selectors of the elements that were combined
 	 * @param {string} sLabel - Current element label
 	 * @param {object} mPropertyBag - Additional properties

package/src/sap/ui/rta/util/changeVisualization/{categories → commands}/MoveVisualization.js

@@ -19,7 +19,9 @@ sap.ui.define([
 	 * Creates a localized description and button text for move changes based on the provided
 	 * current element label.
 	 *
-	 * @param {object} mPayload - Change visualization payload from the change handler
+	 * @param {object} mPayload - Change visualization description payload from the change handler
+	 * @param {string} mPayload.sourceContainer - container from where the element was moved
+	 * @param {string} mPayload.targetContainer - container to where the element was moved
 	 * @param {string} sLabel - Change handler label
 	 * @param {object} mPropertyBag - Additional properties
 	 * @returns {object} Localized description text and button text
@@ -30,19 +32,20 @@ sap.ui.define([
 		var sDescriptionTooltip = oRtaResourceBundle.getText("TXT_CHANGEVISUALIZATION_CHANGE_MOVE_WITHIN", sLabel);
 		var sButtonText;
 		var oAppComponent = mPropertyBag.appComponent;
-		var sSourceParentId = (
-			mPayload.sourceParentContainer
-			&& JsControlTreeModifier.getControlIdBySelector(mPayload.sourceParentContainer, oAppComponent)
+
+		var sSourceId = (
+			mPayload.sourceContainer
+			&& JsControlTreeModifier.getControlIdBySelector(mPayload.sourceContainer, oAppComponent)
 		);
-		var sTargetParentId = (
-			mPayload.targetParentContainer
-			&& JsControlTreeModifier.getControlIdBySelector(mPayload.targetParentContainer, oAppComponent)
+		var sTargetId = (
+			mPayload.targetContainer
+			&& JsControlTreeModifier.getControlIdBySelector(mPayload.targetContainer, oAppComponent)
 		);
 
-		if (sSourceParentId !== sTargetParentId) {
+		if (sSourceId !== sTargetId) {
 			sDescriptionText = oRtaResourceBundle.getText("TXT_CHANGEVISUALIZATION_CHANGE_MOVE", ChangeVisualizationUtils.shortenString(sLabel));
-			sDescriptionTooltip = (sSourceParentId && oRtaResourceBundle.getText("TXT_CHANGEVISUALIZATION_CHANGE_MOVE", sLabel)) || "";
-			sButtonText = sSourceParentId && oRtaResourceBundle.getText("BTN_CHANGEVISUALIZATION_SHOW_DEPENDENT_CONTAINER_MOVE");
+			sDescriptionTooltip = (sSourceId && oRtaResourceBundle.getText("TXT_CHANGEVISUALIZATION_CHANGE_MOVE", sLabel)) || "";
+			sButtonText = sSourceId && oRtaResourceBundle.getText("BTN_CHANGEVISUALIZATION_SHOW_DEPENDENT_CONTAINER_MOVE");
 		}
 		return { descriptionText: sDescriptionText, descriptionTooltip: sDescriptionTooltip, buttonText: sButtonText };
 	};

package/src/sap/ui/rta/util/changeVisualization/{categories → commands}/RenameVisualization.js

@@ -17,7 +17,7 @@ sap.ui.define([
 	 * Creates a localized description for rename changes based on the provided
 	 * change handler payload or the current element label.
 	 *
-	 * @param {object} mPayload - Change visualization payload from the change handler
+	 * @param {object} mPayload - Change visualization description payload from the change handler
 	 * @param {string} [mPayload.originalLabel] - Label before the change was applied
 	 * @param {object} [mPayload.newLabel] - Label after the change was applied
 	 * @param {string} sFallbackLabel - New label as a fallback if change handler provides no info

package/src/sap/ui/rta/util/changeVisualization/{categories → commands}/SplitVisualization.js

@@ -19,7 +19,7 @@ sap.ui.define([
 	 * Creates a localized description and button text for split changes based on the provided
 	 * current element label
 	 *
-	 * @param {object} mPayload - Change visualization payload from the change handler
+	 * @param {object} mPayload - Change visualization description payload from the change handler
 	 * @param {string} sLabel - Current element label
 	 * @returns {object} Localized description text and button text
 	 */

package/src/sap/ui/rta/util/changeVisualization/commands/getCommandVisualization.js

@@ -0,0 +1,37 @@
+/*!
+ * OpenUI5
+ * (c) Copyright 2009-2022 SAP SE or an SAP affiliate company.
+ * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
+ */
+
+sap.ui.define([
+	"sap/ui/rta/util/changeVisualization/commands/RenameVisualization",
+	"sap/ui/rta/util/changeVisualization/commands/MoveVisualization",
+	"sap/ui/rta/util/changeVisualization/commands/CombineVisualization",
+	"sap/ui/rta/util/changeVisualization/commands/SplitVisualization"
+], function(
+	RenameVisualization,
+	MoveVisualization,
+	CombineVisualization,
+	SplitVisualization
+) {
+	"use strict";
+
+	var mCommands = {
+		rename: RenameVisualization,
+		move: MoveVisualization,
+		combine: CombineVisualization,
+		split: SplitVisualization
+	};
+
+	return function(mIndicatorInformation) {
+		var sCommandName = mIndicatorInformation.commandName;
+
+		// Settings commands can be assigned to existing categories
+		// (e.g. "move" to display the "Show Source" button)
+		if (sCommandName === "settings") {
+			sCommandName = mIndicatorInformation.changeCategory;
+		}
+		return mCommands[sCommandName];
+	};
+});

package/src/sap/ui/rta/util/changeVisualization/categories/getVisualizationCategory.js

@@ -1,35 +0,0 @@
-/*!
- * OpenUI5
- * (c) Copyright 2009-2022 SAP SE or an SAP affiliate company.
- * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
- */
-
-sap.ui.define([
-	"sap/ui/rta/util/changeVisualization/categories/RenameVisualization",
-	"sap/ui/rta/util/changeVisualization/categories/MoveVisualization",
-	"sap/ui/rta/util/changeVisualization/categories/CombineVisualization",
-	"sap/ui/rta/util/changeVisualization/categories/SplitVisualization"
-], function(
-	RenameVisualization,
-	MoveVisualization,
-	CombineVisualization,
-	SplitVisualization
-) {
-	"use strict";
-
-	var mCategories = {
-		rename: RenameVisualization,
-		move: MoveVisualization,
-		combine: CombineVisualization,
-		split: SplitVisualization
-	};
-
-	return function(mIndicatorInformation) {
-		var sCategoryName = mIndicatorInformation.commandName;
-		// to enable e.g. move changes in settings commands to show the 'Show Source' button
-		if (sCategoryName === "settings") {
-			sCategoryName = mIndicatorInformation.commandCategory;
-		}
-		return mCategories[sCategoryName];
-	};
-});