@openui5/sap.ui.rta 1.105.0 → 1.106.0

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

@@ -10,33 +10,27 @@ sap.ui.define([
 	"sap/ui/core/Control",
 	"sap/ui/core/format/DateFormat",
 	"sap/ui/events/KeyCodes",
-	"sap/ui/rta/util/changeVisualization/categories/getVisualizationCategory",
+	"sap/ui/rta/util/changeVisualization/commands/getCommandVisualization",
 	"sap/ui/fl/Utils",
 	"sap/ui/fl/util/resolveBinding",
 	"sap/ui/rta/util/changeVisualization/ChangeVisualizationUtils",
-	"sap/ui/core/Core"
+	"sap/ui/core/Core",
+	"sap/ui/rta/util/changeVisualization/ChangeCategories"
 ], function(
 	Fragment,
 	JSONModel,
 	Control,
 	DateFormat,
 	KeyCodes,
-	getVisualizationCategory,
+	getCommandVisualization,
 	FlUtils,
 	resolveBinding,
 	ChangeVisualizationUtils,
-	Core
+	Core,
+	ChangeCategories
 ) {
 	"use strict";
 
-	var CATEGORY_ICONS = {
-		add: "sap-icon://add",
-		move: "sap-icon://move",
-		rename: "sap-icon://edit",
-		combinesplit: "sap-icon://combine",
-		remove: "sap-icon://less"
-	};
-
 	/**
 	 * @class
 	 * Constructor for a new <code>sap.ui.rta.util.changeVisualization.ChangeIndicator</code> class.
@@ -46,7 +40,7 @@ sap.ui.define([
 	 * @alias sap.ui.rta.util.changeVisualization.ChangeIndicator
 	 * @author SAP SE
 	 * @since 1.84.0
-	 * @version 1.105.0
+	 * @version 1.106.0
 	 * @private
 	 */
 	var ChangeIndicator = Control.extend("sap.ui.rta.util.changeVisualization.ChangeIndicator", {
@@ -180,38 +174,47 @@ sap.ui.define([
 
 		var mPropertyBag = { appComponent: FlUtils.getAppComponentForControl(oAffectedElement) };
 		var oOverlay = Core.byId(sOverlayId);
-		var oVisualizationUtil = getVisualizationCategory(mChangeInformation);
 		var sElementLabel = oOverlay.getDesignTimeMetadata().getLabel(oAffectedElement);
-		var oDescription = oVisualizationUtil && oVisualizationUtil.getDescription(mPayload, sElementLabel, mPropertyBag);
-		sElementLabel = sElementLabel && "'" + sElementLabel + "'";
-		var sShortenedElementLabel = ChangeVisualizationUtils.shortenString(sElementLabel);
-		var sChangeTextKey = (
-			"TXT_CHANGEVISUALIZATION_CHANGE_"
-			+ mChangeInformation.commandName.toUpperCase()
-		);
-
+		var oCommandVisualization = getCommandVisualization(mChangeInformation);
+		var oDescription = oCommandVisualization && oCommandVisualization.getDescription(mPayload, sElementLabel, mPropertyBag) || {};
+		var sCommandName = mChangeInformation.commandName;
 		var sDescriptionText;
 		var sDescriptionTooltip;
-		// for settings commands if available description and tooltip should be taken as is from the change handler
-		if (mPayload.description && mChangeInformation.commandName === "settings") {
-			sDescriptionText = mPayload.description;
-			sDescriptionTooltip = mPayload.descriptionTooltip || "";
+
+		// 'Settings' with a custom description should overwrite the description from the CommandVisualization
+		if (sCommandName === "settings" && mPayload.description) {
+			oDescription.descriptionText = mPayload.description;
+			oDescription.descriptionTooltip = mPayload.descriptionTooltip;
+		} else if (mChangeInformation.changeCategory === "other") {
+			// To retrieve the generic description for commands without visualization
+			sCommandName = "other";
+		}
+
+		if (oDescription.descriptionText) {
+			sDescriptionText = oDescription.descriptionText;
+			sDescriptionTooltip = oDescription.descriptionTooltip || "";
 		} else {
-			if (oDescription) {
-				sDescriptionText = oDescription.descriptionText;
-				sDescriptionTooltip = oDescription.descriptionTooltip;
-			} else {
-				sDescriptionText = oRtaResourceBundle.getText(sChangeTextKey, sShortenedElementLabel);
-				sDescriptionTooltip = oRtaResourceBundle.getText(sChangeTextKey, sElementLabel);
-			}
-			sDescriptionTooltip = sDescriptionText.length < sDescriptionTooltip.length ? sDescriptionTooltip : null;
+			sElementLabel = sElementLabel && "'" + sElementLabel + "'";
+			var sShortenedElementLabel = ChangeVisualizationUtils.shortenString(sElementLabel);
+			var sChangeTextKey = (
+				"TXT_CHANGEVISUALIZATION_CHANGE_"
+				+ sCommandName.toUpperCase()
+			);
+			sDescriptionText = oRtaResourceBundle.getText(sChangeTextKey, sShortenedElementLabel);
+			sDescriptionTooltip = oRtaResourceBundle.getText(sChangeTextKey, sElementLabel);
 		}
+		sDescriptionTooltip = sDescriptionText.length < sDescriptionTooltip.length ? sDescriptionTooltip : null;
 		var sDetailButtonText = oDescription && oDescription.buttonText;
+		var sIconTooltip = oRtaResourceBundle.getText(
+			"TXT_CHANGEVISUALIZATION_OVERVIEW_"
+			+ mChangeInformation.changeCategory.toUpperCase()
+		);
 
 		return {
 			description: sDescriptionText,
 			tooltip: sDescriptionTooltip,
-			buttonText: sDetailButtonText
+			buttonText: sDetailButtonText,
+			iconTooltip: sIconTooltip
 		};
 	}
 
@@ -231,7 +234,6 @@ sap.ui.define([
 		var oTexts = getTexts(mChangeInformation, oRtaResourceBundle, sOverlayId);
 		var oDates = getDates(mChangeInformation, oRtaResourceBundle);
 
-
 		return {
 			id: mChangeInformation.id,
 			change: mChangeInformation,
@@ -240,7 +242,8 @@ sap.ui.define([
 			fullDate: oDates.fullDate,
 			relativeDate: oDates.relativeDate,
 			detailButtonText: oTexts.buttonText,
-			icon: CATEGORY_ICONS[mChangeInformation.commandCategory]
+			icon: ChangeCategories.getIconForCategory(mChangeInformation.changeCategory),
+			iconTooltip: oTexts.iconTooltip
 		};
 	}
 

package/src/sap/ui/rta/util/changeVisualization/ChangeIndicatorCategorySelection.fragment.xml

@@ -18,13 +18,13 @@
 		</MessageStrip>
 		<List
 			class="sapUiRtaChangesList"
-			items="{visualizationModel>/commandCategories/}">
+			items="{visualizationModel>/changeCategories/}">
 			<StandardListItem
 				title="{visualizationModel>title}"
 				counter="{visualizationModel>count}"
 				type="{= ${visualizationModel>count} > 0 ? 'Active' : 'Inactive'}"
 				icon="{visualizationModel>icon}"
-				press=".onCommandCategorySelection"/>
+				press=".onChangeCategorySelection"/>
 		</List>
 	</Popover>
 </core:FragmentDefinition>

package/src/sap/ui/rta/util/changeVisualization/ChangeIndicatorPopover.fragment.xml

@@ -31,7 +31,8 @@
 					<cells>
 						<core:Icon
 							src="{details>icon}"
-							class="sapUiTinyMarginBegin"/>
+							class="sapUiTinyMarginBegin"
+							tooltip="{details>iconTooltip}"/>
 						<HBox alignItems="Center">
 							<Text
 								text="{details>description}"

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

@@ -13,7 +13,9 @@ sap.ui.define([
 	"sap/ui/core/util/reflection/JsControlTreeModifier",
 	"sap/ui/dt/ElementUtil",
 	"sap/ui/fl/write/api/ChangesWriteAPI",
-	"sap/ui/fl/Utils"
+	"sap/ui/fl/Utils",
+	"sap/ui/fl/changeHandler/common/ChangeCategories",
+	"sap/ui/core/Core"
 ], function(
 	includes,
 	values,
@@ -23,7 +25,9 @@ sap.ui.define([
 	JsControlTreeModifier,
 	ElementUtil,
 	ChangesWriteAPI,
-	FlUtils
+	FlUtils,
+	ChangeCategories,
+	Core
 ) {
 	"use strict";
 
@@ -35,7 +39,7 @@ sap.ui.define([
 	 * @alias sap.ui.rta.util.changeVisualization.ChangeIndicatorRegistry
 	 * @author SAP SE
 	 * @since 1.86.0
-	 * @version 1.105.0
+	 * @version 1.106.0
 	 * @private
 	 */
 	var ChangeIndicatorRegistry = ManagedObject.extend("sap.ui.rta.util.changeVisualization.ChangeIndicatorRegistry", {
@@ -44,7 +48,7 @@ sap.ui.define([
 				/**
 				 * Available command categories
 				 */
-				commandCategories: {
+				changeCategories: {
 					type: "object",
 					defaultValue: []
 				},
@@ -58,7 +62,11 @@ sap.ui.define([
 		},
 		constructor: function () {
 			ManagedObject.prototype.constructor.apply(this, arguments);
-			this._oChangeIndicatorData = {};
+
+			// List of entries with indicator data, grouped by Change ID
+			this._oRegisteredChanges = {};
+
+			// List of actual change indicator objects, grouped by selector
 			this._oChangeIndicators = {};
 		}
 	});
@@ -68,12 +76,12 @@ sap.ui.define([
 	};
 
 	/**
-	 * Returns all registered changes.
+	 * Returns the change indicator data for all registered changes.
 	 *
-	 * @returns {object[]} Registered changes
+	 * @returns {object[]} Change indicator data for all registered changes
 	 */
-	ChangeIndicatorRegistry.prototype.getChanges = function () {
-		return values(this._oChangeIndicatorData || {}).map(function (oChange) {
+	ChangeIndicatorRegistry.prototype.getAllRegisteredChanges = function () {
+		return values(this._oRegisteredChanges || {}).map(function (oChange) {
 			return Object.assign({}, oChange);
 		});
 	};
@@ -81,55 +89,61 @@ sap.ui.define([
 	/**
 	 * Returns the IDs of all registered changes.
 	 *
-	 * @returns {string[]} Promise with both design time and runtime change
+	 * @returns {string[]} Array with both design time and runtime registered changes
 	 */
-	ChangeIndicatorRegistry.prototype.getChangeIds = function () {
-		return Object.keys(this._oChangeIndicatorData || {});
+	ChangeIndicatorRegistry.prototype.getRegisteredChangeIds = function () {
+		return Object.keys(this._oRegisteredChanges || {});
 	};
 
 	/**
-	 * Returns a registered change.
+	 * Returns a data entry of a registered change indicator for a change ID.
 	 *
 	 * @param {string} sChangeId - ID of the registered change
 	 * @returns {object} Registered change
 	 */
-	ChangeIndicatorRegistry.prototype.getChange = function (sChangeId) {
-		return this._oChangeIndicatorData[sChangeId] && Object.assign({}, this._oChangeIndicatorData[sChangeId]);
+	ChangeIndicatorRegistry.prototype.getRegisteredChange = function (sChangeId) {
+		return this._oRegisteredChanges[sChangeId] && Object.assign({}, this._oRegisteredChanges[sChangeId]);
 	};
 
 	/**
 	 * Groups all registered changes by their selectors and returns a list of selectors
-	 * with all dependent and non-dependent changes.
+	 * with all dependent and non-dependent change indicator data.
 	 *
-	 * @returns {object[]} Change indicators
+	 * @returns {object} List of selectors with change indicator data.
 	 */
-	ChangeIndicatorRegistry.prototype.getChangeIndicatorData = function () {
+	ChangeIndicatorRegistry.prototype.getSelectorsWithRegisteredChanges = function () {
 		var oChangeIndicators = {};
 
-		function addSelector (sSelectorId, sAffectedElementId, oChange, bDependent) {
+		function addSelector (sSelectorId, sAffectedElementId, oChangeIndicatorData, bDependent) {
 			if (oChangeIndicators[sSelectorId] === undefined) {
 				oChangeIndicators[sSelectorId] = [];
 			}
 			oChangeIndicators[sSelectorId].push(Object.assign(
 				{
-					id: oChange.change.getId(),
+					id: oChangeIndicatorData.change.getId(),
 					dependent: bDependent,
 					affectedElementId: sAffectedElementId,
-					payload: oChange.visualizationInfo.payload || {}
+					payload: oChangeIndicatorData.visualizationInfo.payload || {}
 				},
-				_omit(oChange, ["visualizationInfo"])
+				_omit(oChangeIndicatorData, ["visualizationInfo"])
 			));
 		}
 
-		values(this._oChangeIndicatorData).forEach(function (oChange) {
-			oChange.visualizationInfo.displayElementIds.forEach(function (sSelectorId, iIndex) {
-				addSelector(sSelectorId, oChange.visualizationInfo.affectedElementIds[iIndex], oChange, false);
-			});
+		values(this._oRegisteredChanges)
+			.forEach(function (oChangeIndicatorData) {
+				oChangeIndicatorData.visualizationInfo.displayElementIds
+				.forEach(function (sId, iIndex) {
+					// in some cases (like with simple forms) you have to pass the stable id of the child element because the parent id is unstable
+					if (oChangeIndicatorData.visualizationInfo.hasParentWithUnstableId) {
+						sId = Core.byId(sId).getParent().getId();
+					}
+					addSelector(sId, oChangeIndicatorData.visualizationInfo.affectedElementIds[iIndex], oChangeIndicatorData, false);
+				});
 
-			oChange.visualizationInfo.dependentElementIds.forEach(function (sSelectorId) {
-				addSelector(sSelectorId, sSelectorId, oChange, true);
+				oChangeIndicatorData.visualizationInfo.dependentElementIds.forEach(function (sId) {
+					addSelector(sId, sId, oChangeIndicatorData, true);
+				});
 			});
-		});
 
 		return oChangeIndicators;
 	};
@@ -163,20 +177,24 @@ sap.ui.define([
 	ChangeIndicatorRegistry.prototype.registerChange = function(oChange, sCommandName) {
 		var oAppComponent = FlUtils.getAppComponentForControl(ElementUtil.getElementInstance(this.getRootControlId()));
 		return getVisualizationInfo(oChange, oAppComponent).then(function(mChangeVisualizationInfo) {
-			var aCategories = this.getCommandCategories();
-			var sCommandCategory;
+			var aCategories = this.getChangeCategories();
+			var sChangeCategory;
+			// For "settings", the control developer can choose one of the existing categories
 			if (sCommandName === "settings" && includes(Object.keys(aCategories), mChangeVisualizationInfo.payload.category)) {
-				sCommandCategory = mChangeVisualizationInfo.payload.category;
+				sChangeCategory = mChangeVisualizationInfo.payload.category;
 			} else {
-				sCommandCategory = Object.keys(aCategories).find(function (sCommandCategoryName) {
-					return includes(aCategories[sCommandCategoryName], sCommandName);
+				sChangeCategory = Object.keys(aCategories).find(function (sChangeCategoryName) {
+					return includes(aCategories[sChangeCategoryName], sCommandName);
 				});
+				if (!sChangeCategory) {
+					sChangeCategory = ChangeCategories.OTHER;
+				}
 			}
 
-			this._oChangeIndicatorData[oChange.getId()] = {
+			this._oRegisteredChanges[oChange.getId()] = {
 				change: oChange,
 				commandName: sCommandName,
-				commandCategory: sCommandCategory,
+				changeCategory: sChangeCategory,
 				visualizationInfo: mChangeVisualizationInfo
 			};
 		}.bind(this));
@@ -206,6 +224,7 @@ sap.ui.define([
 					affectedElementIds: aAffectedElementIds,
 					dependentElementIds: getSelectorIds(mVisualizationInfo.dependentControls) || [],
 					displayElementIds: getSelectorIds(mVisualizationInfo.displayControls) || aAffectedElementIds,
+					hasParentWithUnstableId: mVisualizationInfo.hasParentWithUnstableId,
 					payload: mVisualizationInfo.payload || {}
 				};
 			});
@@ -249,8 +268,8 @@ sap.ui.define([
 	 * Resets the change and change indicator registries.
 	 */
 	ChangeIndicatorRegistry.prototype.reset = function () {
-		Object.keys(this._oChangeIndicatorData).forEach(function (sKeyToRemove) {
-			this.removeChange(sKeyToRemove);
+		Object.keys(this._oRegisteredChanges).forEach(function (sKeyToRemove) {
+			this.removeRegisteredChange(sKeyToRemove);
 		}.bind(this));
 
 		values(this._oChangeIndicators).forEach(function (oIndicator) {
@@ -260,12 +279,12 @@ sap.ui.define([
 	};
 
 	/**
-	 * Removes a change.
+	 * Removes a data entry of a registered change indicator.
 	 *
 	 * @param {string} sChangeId - ID of the registered change
 	 */
-	ChangeIndicatorRegistry.prototype.removeChange = function (sChangeId) {
-		delete this._oChangeIndicatorData[sChangeId];
+	ChangeIndicatorRegistry.prototype.removeRegisteredChange = function (sChangeId) {
+		delete this._oRegisteredChanges[sChangeId];
 	};
 
 	return ChangeIndicatorRegistry;

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.0
+	 * @version 1.106.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,12 @@ sap.ui.define([
 
 	ChangeVisualization.prototype._updateChangeRegistry = function() {
 		return this._collectChanges().then(function(aChanges) {
-			var aRegisteredChangeIds = this._oChangeIndicatorRegistry.getChangeIds();
+			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;
@@ -379,7 +350,7 @@ 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();
@@ -399,7 +370,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 +440,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 +533,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}/MoveVisualization.js

@@ -20,6 +20,8 @@ sap.ui.define([
 	 * current element label.
 	 *
 	 * @param {object} mPayload - Change visualization payload from the change handler
+	 * @param {string} mPayload.sourceParentContainer - Parent container from where the element was moved
+	 * @param {string} mPayload.targetParentContainer - Parent 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