@openui5/sap.ui.rta 1.98.0 → 1.101.0

package/src/sap/ui/rta/toolbar/translation/Translation.js

@@ -4,6 +4,8 @@
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 
+/* global FormData */
+
 sap.ui.define([
 	"sap/ui/base/ManagedObject",
 	"sap/ui/core/Fragment",
@@ -15,8 +17,7 @@ sap.ui.define([
 	"sap/ui/fl/write/api/TranslationAPI",
 	"sap/ui/fl/Layer",
 	"sap/ui/core/util/File"
-],
-function(
+], function(
 	ManagedObject,
 	Fragment,
 	Utils,
@@ -30,6 +31,34 @@ function(
 ) {
 	"use strict";
 
+	/**
+	 * Controller for the <code>sap.ui.rta.toolbar.translation.Translation</code> controls.
+	 * Contains implementation of translation functionality.
+	 *
+	 * @class
+	 *
+	 * @author SAP SE
+	 * @version 1.101.0
+	 *
+	 * @constructor
+	 * @private
+	 * @since 1.93
+	 * @alias sap.ui.rta.toolbar.translation.Translation
+	 */
+	var Translation = ManagedObject.extend("sap.ui.rta.toolbar.translation.Translation", {
+		metadata: {
+			properties: {
+				toolbar: {
+					type: "sap.ui.rta.toolbar.Base"
+				}
+			}
+		},
+		constructor: function () {
+			ManagedObject.prototype.constructor.apply(this, arguments);
+			this._oTranslationModel = new JSONModel(getTranslationModelData());
+		}
+	});
+
 	function saveFiles(oEvent) {
 		this._oTranslationModel.setProperty("/file", oEvent.getParameter("files")[0]);
 	}
@@ -82,7 +111,8 @@ function(
 				onCancelUploadDialog: function () {
 					this._oDialogUpload.close();
 				}.bind(this),
-				saveFiles: saveFiles.bind(this)
+				saveFiles: saveFiles.bind(this),
+				handleUploadPress: handleUploadPress.bind(this, sUploadId)
 			}
 		}).then(function (oTranslationDialog) {
 			this._oDialogUpload = oTranslationDialog;
@@ -92,6 +122,25 @@ function(
 		}.bind(this));
 	}
 
+
+	function handleUploadPress(sUploadId) {
+		var oFileUploader = sap.ui.getCore().byId(sUploadId + "--fileUploader");
+		oFileUploader.checkFileReadable().then(function() {
+			if (this._oTranslationModel.getProperty("/file")) {
+				var mPropertyBag = {
+					layer: Layer.CUSTOMER,
+					payload: new FormData()
+				};
+				mPropertyBag.payload.append("file", this._oTranslationModel.getProperty("/file"), oFileUploader.getValue());
+				TranslationAPI.postTranslationTexts(mPropertyBag).then(function () {
+					MessageToast.show("Translation texts import successful");
+				}).catch(function (sError) {
+					MessageBox.error("Translation texts import failed: " + sError);
+				}).finally(oFileUploader.clear.bind(oFileUploader));
+			}
+		}.bind(this));
+	}
+
 	function getTranslationModelData() {
 		return Object.assign({}, {
 			sourceLanguage: "",
@@ -101,34 +150,6 @@ function(
 		});
 	}
 
-	/**
-	 * Controller for the <code>sap.ui.rta.toolbar.translation.Translation</code> controls.
-	 * Contains implementation of translation functionality.
-	 *
-	 * @class
-	 *
-	 * @author SAP SE
-	 * @version 1.98.0
-	 *
-	 * @constructor
-	 * @private
-	 * @since 1.93
-	 * @alias sap.ui.rta.toolbar.translation.Translation
-	 */
-	var Translation = ManagedObject.extend("sap.ui.rta.toolbar.translation.Translation", {
-		metadata: {
-			properties: {
-				toolbar: {
-					type: "sap.ui.rta.toolbar.Base"
-				}
-			}
-		},
-		constructor: function () {
-			ManagedObject.prototype.constructor.apply(this, arguments);
-			this._oTranslationModel = new JSONModel(getTranslationModelData());
-		}
-	});
-
 	Translation.prototype.showTranslationPopover = function (oEvent) {
 		var oTranslationButton = oEvent.getSource();
 

package/src/sap/ui/rta/util/PluginManager.js

@@ -30,7 +30,8 @@ sap.ui.define([
 	"sap/ui/rta/plugin/Settings",
 	"sap/ui/rta/plugin/Split",
 	"sap/ui/rta/plugin/Stretch",
-	"sap/ui/rta/plugin/LocalReset"
+	"sap/ui/rta/plugin/LocalReset",
+	"sap/ui/rta/plugin/Resize"
 ], function(
 	isEmptyObject,
 	values,
@@ -58,7 +59,8 @@ sap.ui.define([
 	SettingsPlugin,
 	SplitPlugin,
 	StretchPlugin,
-	LocalResetPlugin
+	LocalResetPlugin,
+	ResizePlugin
 ) {
 	"use strict";
 
@@ -66,7 +68,7 @@ sap.ui.define([
 	 * Constructor for a new sap.ui.rta.util.PluginManager
 	 * @extends sap.ui.base.ManagedObject
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.101.0
 	 * @constructor
 	 * @private
 	 * @since 1.86
@@ -181,6 +183,10 @@ sap.ui.define([
 				commandFactory: this._oCommandFactory
 			});
 
+			this._mDefaultPlugins["resize"] = new ResizePlugin({
+				commandFactory: this._oCommandFactory
+			});
+
 			this._mDefaultPlugins["contextMenu"] = new ContextMenuPlugin();
 
 			this._mDefaultPlugins["tabHandling"] = new TabHandlingPlugin();

package/src/sap/ui/rta/util/PopupManager.js

@@ -8,6 +8,7 @@ sap.ui.define([
 	"sap/ui/base/ManagedObject",
 	"sap/m/InstanceManager",
 	"sap/ui/dt/Overlay",
+	"sap/ui/dt/OverlayRegistry",
 	"sap/ui/fl/Utils",
 	"sap/ui/core/Component",
 	"sap/ui/core/ComponentContainer",
@@ -20,6 +21,7 @@ sap.ui.define([
 	ManagedObject,
 	InstanceManager,
 	Overlay,
+	OverlayRegistry,
 	flUtils,
 	Component,
 	ComponentContainer,
@@ -40,7 +42,7 @@ sap.ui.define([
 	 * Constructor for a new sap.ui.rta.util.PopupManager
 	 * @extends sap.ui.base.ManagedObject
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.101.0
 	 * @constructor
 	 * @private
 	 * @since 1.48
@@ -58,17 +60,17 @@ sap.ui.define([
 				 * To set the associated controls as an autoCloseArea for all Popover/Dialog open in RTA mode.
 				 * Needs to be filled before the popup is open.
 				 */
-				autoCloseAreas: {type: "sap.ui.core.Control", multiple: true, singularName: "autoCloseArea"}
+				autoCloseAreas: { type: "sap.ui.core.Control", multiple: true, singularName: "autoCloseArea" }
 			},
 			events: {
 				open: {
 					parameters: {
-						oControl: {type: "sap.ui.core.Control"}
+						oControl: { type: "sap.ui.core.Control" }
 					}
 				},
 				close: {
 					parameters: {
-						oControl: {type: "sap.ui.core.Control"}
+						oControl: { type: "sap.ui.core.Control" }
 					}
 				}
 			},
@@ -85,7 +87,7 @@ sap.ui.define([
 		// create map for modal states
 		this._oModalState = new Map();
 		this._aPopupFilters = [this._isSupportedPopup.bind(this), this._isPopupAdaptable.bind(this)];
-		this._aPopupFilters.forEach(function (fnFilter) {
+		this._aPopupFilters.forEach(function(fnFilter) {
 			ZIndexManager.addPopupFilter(fnFilter);
 		});
 	};
@@ -214,14 +216,27 @@ sap.ui.define([
 		}
 	};
 
+	/**
+	 * Setting visibility hidden on the other root element overlays
+	 * keeps the focus on the current popover overlay
+	 * @param {boolean} bVisible - Overlay visibility
+	 * @param {sap.m.Popover} oPopover - Current popover
+	 */
+	PopupManager.prototype._adjustRootOverlayVisibility = function(bVisible, oPopover) {
+		this.getRta()._oDesignTime.getRootElements().forEach(function(oRootElement) {
+			if (oRootElement.getId() !== oPopover.getId()) {
+				OverlayRegistry.getOverlay(oRootElement).setVisible(bVisible);
+			}
+		});
+	};
+
 	/**
 	 * Attached to RTA mode change
 	 * @param  {sap.ui.base.Event} oEvent The Event triggered by the mode change
 	 */
 	PopupManager.prototype._onModeChange = function(oEvent) {
 		var sNewMode = oEvent.getParameters().mode;
-
-		var fnApplyFocusAndSetModal = function (sMode, oPopover) {
+		var fnApplyFocusAndSetModal = function(sMode, oPopover) {
 			if (sMode === 'navigation') {
 				// add focus handlers
 				oPopover.oPopup[this._getFocusEventName("add")]();
@@ -325,13 +340,19 @@ sap.ui.define([
 	 *
 	 * @private
 	 */
-	PopupManager.prototype._setModal = function (bSetModal, oPopupElement) {
+	PopupManager.prototype._setModal = function(bSetModal, oPopupElement) {
 		var bOriginalModalState = this._oModalState.get(oPopupElement.oPopup);
-		if (typeof bOriginalModalState !== "boolean" && bSetModal && this.getRta().getMode() === 'adaptation') {
+		if (typeof bOriginalModalState !== "boolean" && bSetModal && this.getRta().getMode() !== 'navigation') {
 			this._oModalState.set(oPopupElement.oPopup, oPopupElement.oPopup.getModal());
+			if (this._isPopupAdaptable(oPopupElement)) {
+				this._adjustRootOverlayVisibility(false, oPopupElement);
+			}
 			oPopupElement.oPopup.setModal(true);
 		} else if (typeof bOriginalModalState === "boolean" && bSetModal === false) {
 			oPopupElement.oPopup.setModal(bOriginalModalState);
+			if (this._isPopupAdaptable(oPopupElement)) {
+				this._adjustRootOverlayVisibility(true, oPopupElement);
+			}
 			this._oModalState.delete(oPopupElement.oPopup);
 		}
 	};
@@ -395,7 +416,7 @@ sap.ui.define([
 		if (!this.fnOriginalPopupOnAfterRendering) {
 			this.fnOriginalPopupOnAfterRendering = oPopup.onAfterRendering;
 		}
-		oPopup.onAfterRendering = function () {
+		oPopup.onAfterRendering = function() {
 			var vOriginalReturn = this.fnOriginalPopupOnAfterRendering.apply(oPopup, arguments);
 			oPopup[this._getFocusEventName("remove")]();
 			return vOriginalReturn;
@@ -433,7 +454,7 @@ sap.ui.define([
 		return function(oPopupElement) {
 			var vOriginalReturn = fnOriginalFunction.apply(InstanceManager, arguments);
 			if (this._isSupportedPopup(oPopupElement)) {
-				if (this._isPopupAdaptable(oPopupElement, false)
+				if (this._isPopupAdaptable(oPopupElement)
 					&& this.getRta()._oDesignTime) {
 					this.getRta()._oDesignTime.removeRootElement(oPopupElement);
 				}
@@ -597,7 +618,7 @@ sap.ui.define([
 	PopupManager.prototype.exit = function() {
 		this._restoreInstanceFunctions();
 		delete this._oModalState;
-		this._aPopupFilters.forEach(function (fnFilter) {
+		this._aPopupFilters.forEach(function(fnFilter) {
 			ZIndexManager.removePopupFilter(fnFilter);
 		});
 	};

package/src/sap/ui/rta/util/ServiceEventBus.js

@@ -19,7 +19,7 @@ function(
 	 *
 	 * @extends sap.ui.core.EventBus
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.101.0
 	 * @private
 	 * @since 1.56.0
 	 * @alias sap.ui.rta.util.ServiceEventBus

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

@@ -13,7 +13,9 @@ sap.ui.define([
 	"sap/ui/events/KeyCodes",
 	"sap/ui/rta/util/changeVisualization/categories/getVisualizationCategory",
 	"sap/ui/fl/Utils",
-	"sap/ui/fl/util/resolveBinding"
+	"sap/ui/fl/util/resolveBinding",
+	"sap/ui/rta/util/changeVisualization/ChangeVisualizationUtils",
+	"sap/ui/core/Core"
 ], function(
 	Fragment,
 	JSONModel,
@@ -23,9 +25,20 @@ sap.ui.define([
 	KeyCodes,
 	getVisualizationCategory,
 	FlUtils,
-	resolveBinding
+	resolveBinding,
+	ChangeVisualizationUtils,
+	Core
 ) {
 	"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.
@@ -35,7 +48,7 @@ sap.ui.define([
 	 * @alias sap.ui.rta.util.changeVisualization.ChangeIndicator
 	 * @author SAP SE
 	 * @since 1.84.0
-	 * @version 1.98.0
+	 * @version 1.101.0
 	 * @private
 	 */
 	var ChangeIndicator = Control.extend("sap.ui.rta.util.changeVisualization.ChangeIndicator", {
@@ -79,11 +92,6 @@ sap.ui.define([
 					type: "sap.m.Popover",
 					multiple: false,
 					visibility: "hidden"
-				},
-				_text: {
-					type: "sap.m.Text",
-					multiple: false,
-					visibility: "hidden"
 				}
 			},
 			events: {
@@ -115,59 +123,87 @@ sap.ui.define([
 				oRm.openStart("div", oControl);
 				oRm.class("sapUiRtaChangeIndicator");
 				oRm.class("sapUiRtaChangeIndicatorChange");
-				oRm.style("width", oControl._getSize() + "px");
-				oRm.style("height", oControl._getSize() + "px");
-				oRm.openEnd();
-				oRm.openStart("div");
+				if (oControl.getChanges().length > 4) {
+					oRm.class("sapUiRtaChangeIndicatorColorDark");
+				} else if (oControl.getChanges().length > 1) {
+					oRm.class("sapUiRtaChangeIndicatorColorMedium");
+				} else {
+					oRm.class("sapUiRtaChangeIndicatorColorLight");
+				}
 				oRm.openEnd();
-				oRm.renderControl(oControl.getAggregation("_text"));
-				oRm.close("div");
 				oRm.close("div");
 			}
 		},
-		constructor: function () {
+		constructor: function() {
 			this._oDetailModel = new JSONModel();
 			this._oDetailModel.setDefaultBindingMode("OneWay");
 
 			Control.prototype.constructor.apply(this, arguments);
+
+			this._fnHoverTrue = this._toggleHoverStyleClasses.bind(this, true);
+			this._fnHoverFalse = this._toggleHoverStyleClasses.bind(this, false);
 		}
 	});
 
-	ChangeIndicator.prototype.init = function () {
+	function handleBrowserEventsOnElement(oElement, sEventHandler) {
+		oElement[sEventHandler]("click", this._onSelect, this);
+		oElement[sEventHandler]("tap", this._onSelect, this);
+		oElement[sEventHandler]("keydown", this._onKeyDown, this);
+		oElement[sEventHandler]("mouseout", this._fnHoverFalse);
+		oElement[sEventHandler]("focusout", this._fnHoverFalse);
+		oElement[sEventHandler]("mouseover", this._fnHoverTrue);
+		oElement[sEventHandler]("focusin", this._fnHoverTrue);
+	}
+
+	function centerVertically(oIndicator) {
+		var oIndicatorDomRef = oIndicator.getDomRef();
+		var iOverlayHeight = document.getElementById(oIndicator.getOverlayId()).offsetHeight;
+		var 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");
+		}
+	}
+
+	ChangeIndicator.prototype.init = function() {
 		this._iOldTabIndex = 0;
-		this.setAggregation("_text", new Text({
-			text: "{= (${changes} || []).length}",
-			visible: "{= (${changes} || []).length > 1}"
-		}).addStyleClass("sapUiRtaChangeIndicatorText"));
+		handleBrowserEventsOnElement.call(this, this, "attachBrowserEvent");
+	};
 
-		this.attachBrowserEvent("click", this._onSelect, this);
-		this.attachBrowserEvent("tap", this._onSelect, this);
-		this.attachBrowserEvent("keydown", this._onKeyDown, this);
-		this.attachBrowserEvent("mouseleave", function() {this._toggleHoverStyleClasses(false); }, this);
-		this.attachBrowserEvent("focusout", function() {this._toggleHoverStyleClasses(false); }, this);
-		this.attachBrowserEvent("mouseover", function() {this._toggleHoverStyleClasses(true); }, this);
-		this.attachBrowserEvent("focusin", function() {this._toggleHoverStyleClasses(true); }, this);
+	ChangeIndicator.prototype.setVisible = function(bVisible) {
+		Control.prototype.setVisible.apply(this, arguments);
+		var oOverlay = Core.byId(this.getOverlayId());
+		// needed because the change indicator cleanup is only triggered on save and exit
+		if (oOverlay) {
+			if (bVisible) {
+				handleBrowserEventsOnElement.call(this, oOverlay, "attachBrowserEvent");
+			} else {
+				handleBrowserEventsOnElement.call(this, oOverlay, "detachBrowserEvent");
+				if (this.getAggregation("_popover")) {
+					this.getAggregation("_popover").destroy();
+				}
+			}
+		}
+		return this;
 	};
 
-	ChangeIndicator.prototype.focus = function () {
+	ChangeIndicator.prototype.focus = function() {
 		if (this.getDomRef()) {
 			// Element is rendered, focus immediately
 			Control.prototype.focus.apply(this, arguments);
 			this._bScheduledForFocus = false;
+			return;
 		}
 		this._bScheduledForFocus = true;
 	};
 
-	ChangeIndicator.prototype._getSize = function () {
-		var oOverlay = document.getElementById(this.getOverlayId());
-		var iSize = oOverlay.offsetHeight;
-		return (iSize > 50 ? 50 : iSize) - 2;
-	};
-
-	ChangeIndicator.prototype.onAfterRendering = function () {
-		// Attach to the overlay
+	ChangeIndicator.prototype.onAfterRendering = function() {
 		var oOverlay = document.getElementById(this.getOverlayId());
-		oOverlay.appendChild(this.getDomRef());
+		if (oOverlay) {
+			// Attach to the overlay
+			oOverlay.appendChild(this.getDomRef());
+			centerVertically(this);
+		}
 		// Restore the Tabindex if stored before; set to 0 as default
 		this.getDomRef().tabIndex = this._iOldTabIndex;
 
@@ -178,21 +214,27 @@ sap.ui.define([
 		}
 	};
 
-	ChangeIndicator.prototype.exit = function () {
+	ChangeIndicator.prototype.exit = function() {
 		var oDomRef = this.getDomRef();
+		var oOverlay = Core.byId(this.getOverlayId());
 		if (oDomRef) {
 			oDomRef.parentNode.removeChild(oDomRef);
 		}
-		this.detachBrowserEvent("click", this._onSelect, this);
-		this.detachBrowserEvent("keydown", this._onKeyDown, this);
+		if (oOverlay) {
+			if (this.getAggregation("_popover")) {
+				this.getAggregation("_popover").destroy();
+			}
+			handleBrowserEventsOnElement.call(this, oOverlay, "detachBrowserEvent");
+		}
+		handleBrowserEventsOnElement.call(this, this, "detachBrowserEvent");
 	};
 
-	ChangeIndicator.prototype.setChanges = function (aChanges) {
+	ChangeIndicator.prototype.setChanges = function(aChanges) {
 		this.setProperty("changes", aChanges);
-		this._oDetailModel.setData((aChanges || []).map(this._formatChangesModelItem.bind(this)));
+		this._oDetailModel.setData((aChanges || []).reverse().map(this._formatChangesModelItem.bind(this)));
 	};
 
-	ChangeIndicator.prototype._onSelect = function (oEvent) {
+	ChangeIndicator.prototype._onSelect = function(oEvent) {
 		this.focus();
 		oEvent.stopPropagation();
 		this._openDetailPopover();
@@ -208,19 +250,23 @@ sap.ui.define([
 		});
 	};
 
-	ChangeIndicator.prototype._toggleHoverStyleClasses = function(bAdd) {
-		var oOverlay = sap.ui.getCore().byId(this.getOverlayId());
+	ChangeIndicator.prototype._toggleHoverStyleClasses = function(bAdd, oEvent) {
+		if (oEvent) {
+			oEvent.stopPropagation();
+			oEvent.preventDefault();
+		}
+		var oOverlay = Core.byId(this.getOverlayId());
 		if (oOverlay.getMetadata().getName() !== "sap.ui.dt.ElementOverlay") {
 			return;
 		}
 		var sFunctionName = bAdd ? "addStyleClass" : "removeStyleClass";
-		oOverlay[sFunctionName]("sapUiRtaOverlayHover");
 		oOverlay[sFunctionName]("sapUiRtaChangeIndicatorHovered");
+		this[sFunctionName]("sapUiRtaHover");
 	};
 
-	ChangeIndicator.prototype._formatChangesModelItem = function (mChangeInformation) {
-		var oAffectedElement = sap.ui.getCore().byId(mChangeInformation.affectedElementId);
-		var mPayload = Object.keys(mChangeInformation.payload || {}).reduce(function (mPayload, sKey) {
+	ChangeIndicator.prototype._formatChangesModelItem = function(mChangeInformation) {
+		var oAffectedElement = Core.byId(mChangeInformation.affectedElementId);
+		var mPayload = Object.keys(mChangeInformation.payload || {}).reduce(function(mPayload, sKey) {
 			var vOriginalValue = mChangeInformation.payload[sKey];
 			var bIsBinding = FlUtils.isBinding(vOriginalValue);
 			var vValue = bIsBinding
@@ -230,36 +276,39 @@ sap.ui.define([
 			return mPayload;
 		}, {});
 
-		var oOverlay = sap.ui.getCore().byId(this.getOverlayId());
+		var mPropertyBag = { appComponent: FlUtils.getAppComponentForControl(oAffectedElement) };
+		var oOverlay = Core.byId(this.getOverlayId());
 		var sElementLabel = oOverlay.getDesignTimeMetadata().getLabel(oAffectedElement);
 		var oVisualizationUtil = getVisualizationCategory(mChangeInformation.commandName);
-		var oDescription = oVisualizationUtil && oVisualizationUtil.getDescription(mPayload, sElementLabel);
-		var oRtaResourceBundle = sap.ui.getCore().getLibraryResourceBundle("sap.ui.rta");
-		var sChangeTitle = mChangeInformation.commandName.charAt(0).toUpperCase() + mChangeInformation.commandName.slice(1);
+		var oDescription = oVisualizationUtil && oVisualizationUtil.getDescription(mPayload, sElementLabel, mPropertyBag);
+		var oRtaResourceBundle = Core.getLibraryResourceBundle("sap.ui.rta");
 		sElementLabel = sElementLabel && "'" + sElementLabel + "'";
+		var sShortenedElementLabel = ChangeVisualizationUtils.shortenString(sElementLabel);
 		var sChangeTextKey = (
 			"TXT_CHANGEVISUALIZATION_CHANGE_"
 			+ mChangeInformation.commandName.toUpperCase()
 		);
-		var sChangeText = oDescription ? oDescription.descriptionText : oRtaResourceBundle.getText(sChangeTextKey, sElementLabel);
+		var sDescriptionText = oDescription ? oDescription.descriptionText : oRtaResourceBundle.getText(sChangeTextKey, sShortenedElementLabel);
+		var sDescriptionTooltip = oDescription ? oDescription.descriptionTooltip : oRtaResourceBundle.getText(sChangeTextKey, sElementLabel);
 		var sCreationDate = mChangeInformation.change.getCreation();
 		var oDate = new Date(sCreationDate);
 		var sFallbackDate = oRtaResourceBundle.getText("TXT_CHANGEVISUALIZATION_CREATED_IN_SESSION_DATE");
 		var sFullDate = sCreationDate ? DateFormat.getDateTimeInstance().format(oDate) : sFallbackDate;
-		var sRelativeDate = sCreationDate ? DateFormat.getDateTimeInstance({relative: "true"}).format(oDate) : sFallbackDate;
+		var sRelativeDate = sCreationDate ? DateFormat.getDateTimeInstance({ relative: "true" }).format(oDate) : sFallbackDate;
 		var sDetailButtonText = oDescription && oDescription.buttonText;
 		return {
 			id: mChangeInformation.id,
 			change: mChangeInformation,
-			changeTitle: sChangeTitle,
-			description: sChangeText,
+			description: sDescriptionText,
+			descriptionTooltip: sDescriptionTooltip && sDescriptionText.length < sDescriptionTooltip.length ? sDescriptionTooltip : null,
 			fullDate: sFullDate,
 			relativeDate: sRelativeDate,
-			detailButtonText: sDetailButtonText
+			detailButtonText: sDetailButtonText,
+			icon: CATEGORY_ICONS[mChangeInformation.commandCategory]
 		};
 	};
 
-	ChangeIndicator.prototype._openDetailPopover = function () {
+	ChangeIndicator.prototype._openDetailPopover = function() {
 		if (!this.getAggregation("_popover")) {
 			//store the tabindex (tabindex will be removed on opening the popover)
 			this._iOldTabIndex = this.getDomRef().getAttribute("tabindex");
@@ -280,7 +329,7 @@ sap.ui.define([
 		}
 	};
 
-	ChangeIndicator.prototype._showDependentElements = function (oEvent) {
+	ChangeIndicator.prototype._showDependentElements = function(oEvent) {
 		this.getAggregation("_popover").close();
 		var sChangeId = this.getChanges().length > 1
 			? oEvent.getSource().getBindingContext("details").getObject().id

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

@@ -0,0 +1,30 @@
+<core:FragmentDefinition
+	xmlns:core="sap.ui.core"
+	xmlns="sap.m"
+	xmlns:l="sap.ui.layout">
+	<Popover
+		showHeader="false"
+		placement="Bottom">
+		<MessageStrip
+			text="{visualizationModel>/popupInfoMessage}"
+			type="Information"
+			showIcon="true"
+			visible="{= ${visualizationModel>/hiddenChanges}.length > 0 }">
+			<link>
+				<Link text="{i18n>BUT_CHANGEVISUALIZATION_LEARNMORE}"
+					target="_blank"
+					href="https://ui5.sap.com/1.101.0/#/topic/35274280504f42cd87cc4fd3d403ca91.html#loio35274280504f42cd87cc4fd3d403ca91/visualization" />
+			</link>
+		</MessageStrip>
+		<List
+			class="sapUiRtaChangesList"
+			items="{visualizationModel>/commandCategories/}">
+			<StandardListItem
+				title="{visualizationModel>title}"
+				counter="{visualizationModel>count}"
+				type="{= ${visualizationModel>count} > 0 ? 'Active' : 'Inactive'}"
+				icon="{visualizationModel>icon}"
+				press=".onCommandCategorySelection"/>
+		</List>
+	</Popover>
+</core:FragmentDefinition>

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

@@ -6,7 +6,6 @@
 		showHeader="false"
 		placement="PreferredTopOrFlip"
 		class="sapUiRtaPopover">
-		<Label visible="false" text="Changes"/>
 		<Table
 			ariaLabelledBy="Changes"
 			items="{details>/}"
@@ -16,7 +15,7 @@
 			<columns>
 				<Column
 					width="auto">
-					<Text text="{i18n>TIT_CHANGEVISUALIZATION_CHANGE}" />
+					<Text text="{i18n>TIT_CHANGEVISUALIZATION_TYPE}" />
 				</Column>
 				<Column
 					width="auto">
@@ -30,11 +29,13 @@
 			<items>
 				<ColumnListItem>
 					<cells>
-						<Text
-							text="{details>changeTitle}" />
+						<core:Icon
+							src="{details>icon}"
+							class="sapUiTinyMarginBegin"/>
 						<HBox alignItems="Center">
 							<Text
-								text="{details>description}"/>
+								text="{details>description}"
+								tooltip="{details>descriptionTooltip}"/>
 							<Button
 								visible="{= !!${details>detailButtonText}}"
 								text="{details>detailButtonText}"

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

@@ -25,7 +25,7 @@ sap.ui.define([
 	 * @alias sap.ui.rta.util.changeVisualization.ChangeIndicatorRegistry
 	 * @author SAP SE
 	 * @since 1.86.0
-	 * @version 1.98.0
+	 * @version 1.101.0
 	 * @private
 	 */
 	var ChangeIndicatorRegistry = ManagedObject.extend("sap.ui.rta.util.changeVisualization.ChangeIndicatorRegistry", {