@sapui5/sap.cux.home 1.142.0 → 1.143.0

package/src/sap/cux/home/CardsPanel.ts

@@ -27,9 +27,11 @@ import Container from "sap/ushell/Container";
 import S4MyHome from "sap/ushell/api/S4MyHome";
 import { Intent } from "sap/ushell/services/AppLifeCycle";
 import Navigation from "sap/ushell/services/Navigation";
+import BaseContainer from "./BaseContainer";
 import BasePanel from "./BasePanel";
+import CardsContainer from "./CardsContainer";
 import { $CardsPanelSettings } from "./CardsPanel";
-import InsightsContainer from "./InsightsContainer";
+import ErrorPanel from "./ErrorPanel";
 import MenuItem from "./MenuItem";
 import {
 	ICard,
@@ -51,41 +53,25 @@ import { recycleId } from "./utils/DataFormatUtils";
 import { calculateCardWidth, DeviceType, fetchElementProperties } from "./utils/Device";
 import { focusDraggedItem } from "./utils/DragDropUtils";
 import { addFESRId, addFESRNavigationSource, FESRNavigationSource } from "./utils/FESRUtil";
-import {
-	createShowMoreActionButton,
-	createShowMoreMenuItem,
-	getAssociatedFullScreenMenuItem,
-	sortMenuItems,
-	targetsAreEqual
-} from "./utils/InsightsUtils";
+import { getAssociatedFullScreenButton, getAssociatedFullScreenMenuItem, sortMenuItems, targetsAreEqual } from "./utils/InsightsUtils";
 import PageManager from "./utils/PageManager";
 import PersonalisationUtils from "./utils/PersonalisationUtils";
 import UShellPersonalizer, { IPersonalizationData } from "./utils/UshellPersonalizer";
 
 export enum cardsMenuItems {
 	REFRESH = "cards-refresh",
-	EDIT_CARDS = "cards-editCards",
-	AI_INSIGHT_CARD = "cards-addAIInsightCard"
+	EDIT_CARDS = "cards-editCards"
 }
 
-export enum cardsContainerMenuItems {
-	REFRESH = "container-cards-refresh",
-	EDIT_CARDS = "container-cards-editCards",
-	SHOW_MORE = "cardsContainerFullScreenMenuItem",
-	AI_INSIGHT_CARD = "container-cards-addAIInsightCard"
+export enum cardsActionButtons {
+	SHOW_MORE = "fullScreen"
 }
 
-export enum cardsContainerActionButtons {
-	SHOW_MORE = "cardsContanerFullScreenActionButton"
+export enum errorPanelMenuItems {
+	EDIT_CARDS = "cards-errorPanel-editCards"
 }
-const sortedMenuItems: (cardsMenuItems | string)[] = [
-	cardsMenuItems.REFRESH,
-	cardsMenuItems.EDIT_CARDS,
-	cardsMenuItems.AI_INSIGHT_CARD,
-	"showMore",
-	"settings"
-];
 
+const sortedMenuItems: (cardsMenuItems | string)[] = [cardsMenuItems.REFRESH, cardsMenuItems.EDIT_CARDS, "showMore", "settings"];
 interface IcardActionEvent {
 	getParameter(sParam: string): unknown;
 	preventDefault(): void;
@@ -163,7 +149,7 @@ export default class CardsPanel extends BasePanel {
 	};
 	private cardHelperInstance!: ICardHelperInstance;
 	private _cardsFlexWrapper!: VBox;
-	private cardsContainer!: GridContainer;
+	private cardsWrapperContainer!: GridContainer;
 	private cardsMobileContainer!: HeaderContainer;
 	private aVisibleCardInstances: Card[] = [];
 	private _oData!: Record<string, unknown>;
@@ -176,14 +162,12 @@ export default class CardsPanel extends BasePanel {
 	private cardsInViewport: Card[] = [];
 	private oEventBus!: EventBus;
 	private _appSwitched: boolean = false;
-	private _containerMenuItems!: MenuItem[];
-	private _containerActionButtons!: Button[];
-	private insightsContainer!: InsightsContainer;
-	private _headerVisible: boolean = false;
+	private cardsContainer!: CardsContainer;
 	private _controlMap!: Map<string, UI5Element>;
 	private _cardsRendered!: Promise<void> | undefined;
 	private pageManagerInstance!: PageManager;
 	private hasCustomSpace!: boolean;
+	private _errorPanel!: ErrorPanel;
 
 	constructor(idOrSettings?: string | $CardsPanelSettings);
 	constructor(id?: string, settings?: $CardsPanelSettings);
@@ -205,6 +189,7 @@ export default class CardsPanel extends BasePanel {
 	 */
 	public init() {
 		super.init();
+		this.setProperty("title", `${this._i18nBundle?.getText("insightsCards")}`);
 		this.setProperty("key", "cards");
 		this.setProperty("enableFullScreen", true);
 		this.cardWidth = "19rem";
@@ -383,9 +368,7 @@ export default class CardsPanel extends BasePanel {
 				icon: "sap-icon://filter",
 				action: (oCard: Card) => {
 					const cardId = (oCard.getManifestEntry("sap.app") as ISapApp).id;
-					(this.getParent() as InsightsContainer)
-						?._getLayout()
-						.openSettingsDialog(SETTINGS_PANELS_KEYS.INSIGHTS_CARDS, { cardId });
+					(this.getParent() as CardsContainer)?._getLayout().openSettingsDialog(SETTINGS_PANELS_KEYS.INSIGHTS_CARDS, { cardId });
 				},
 				visible: async (oCard: Card) => {
 					const oEntry = await this._getManifestEntryFromCard(oCard, "sap.insights");
@@ -591,6 +574,30 @@ export default class CardsPanel extends BasePanel {
 		this.fireEvent("loaded");
 	}
 
+	/**
+	 * Sorts the menu items based on the provided order.
+	 *
+	 * @private
+	 * @param {string[]} menuItems - The order of the menu items.
+	 */
+	private _sortMenuItems(menuItems: string[]) {
+		const panelMenuItems = this.getAggregation("menuItems") as MenuItem[];
+		let sortedMenuItems = sortMenuItems(menuItems, panelMenuItems);
+		this.removeAllAggregation("menuItems");
+		sortedMenuItems?.forEach((menuItem) => this.addAggregation("menuItems", menuItem));
+	}
+
+	private _setMenuItemsVisibility(menuItem: MenuItem, bVisible: boolean) {
+		if (
+			menuItem &&
+			(menuItem.getId().includes(cardsMenuItems.REFRESH) ||
+				menuItem.getId().includes(cardsMenuItems.EDIT_CARDS) ||
+				menuItem.getId().includes("showMore"))
+		) {
+			menuItem.setVisible(bVisible);
+		}
+	}
+
 	/**
 	 * Rerenders the cards.
 	 *
@@ -603,9 +610,9 @@ export default class CardsPanel extends BasePanel {
 				void (async () => {
 					try {
 						// Enable placeholders after updating/rerendering cards
-						const sDefaultAggreName = this._getCardContainer().getMetadata().getDefaultAggregationName();
+						const sDefaultAggreName = this._getCardWrapperContainer().getMetadata().getDefaultAggregationName();
 
-						this._getCardContainer().removeAllAggregation(sDefaultAggreName);
+						this._getCardWrapperContainer().removeAllAggregation(sDefaultAggreName);
 						this._showPlaceHolders();
 						// Fetch Cards from insights service
 						const preferedCardIDs = this.hasCustomSpace ? PREFERED_CARDS : [];
@@ -615,12 +622,21 @@ export default class CardsPanel extends BasePanel {
 						if (!listBinding.hasListeners("change")) {
 							listBinding?.enableExtendedChangeDetection(true, "/cards", {});
 							listBinding?.attachChange(async () => {
-								await (this._cardsRendered ?? Promise.resolve());
+								if (this._cardsRendered) {
+									await this._cardsRendered;
+								}
 								const visibleCards = userVisibleCardModel.getProperty("/cards") as ICard[];
 								if (visibleCards.length !== this.aVisibleCardInstances.length && visibleCards.length > 0) {
+									// Show cards in UI
 									this._showCards(visibleCards);
 								} else if (!visibleCards.length) {
+									//if there are no tiles, hide the panel and show the error panel
+									this.setProperty("title", `${this._i18nBundle?.getText("insightsCards")}`);
+									this.getMenuItems().forEach((item) => {
+										this._setMenuItemsVisibility(item, false);
+									});
 									this.fireHandleHidePanel();
+									this._addErrorPanel();
 								}
 							});
 						}
@@ -630,6 +646,13 @@ export default class CardsPanel extends BasePanel {
 						if (aCards.length === 0 && showRecommendation === undefined && !skipRecommendation) {
 							await this._getRecommendationCards();
 						} else if (aCards.length) {
+							this._errorPanel?.setVisible(false);
+							//Update the panel title with the number of cards
+							this.setProperty("title", `${this._i18nBundle?.getText("insightsCards")} (${aCards.length})`);
+							//if the panel has been loaded and has cards, update the visibility of header elements of the panel
+							this.getMenuItems().forEach((item) => {
+								this._setMenuItemsVisibility(item, true);
+							});
 							if (showRecommendation === undefined) {
 								await this._updateRecommendationStatus();
 							}
@@ -638,11 +661,20 @@ export default class CardsPanel extends BasePanel {
 							await this.checkForRecommendedCards(aCards);
 						} else {
 							this.fireHandleHidePanel();
+							this._addErrorPanel();
+							const layout = this._getCardsContainer()?._getLayout();
+							if (layout.getProperty("expanded")) {
+								this.cardsContainer.addContent(this);
+								layout?.toggleFullScreen(this);
+								//remove the cards panel from the cards container
+								this.cardsContainer.removeContent(this);
+							}
 						}
 						this._cardsRendered = undefined;
 						resolve();
 					} catch (error) {
 						this.fireHandleHidePanel();
+						this._addErrorPanel();
 						this._cardsRendered = undefined;
 						if (error instanceof Error) {
 							Log.error(error.message);
@@ -654,6 +686,52 @@ export default class CardsPanel extends BasePanel {
 		}
 		return this._cardsRendered;
 	}
+
+	/**
+	 * Adds an error panel when no cards are available.
+	 *
+	 * @private
+	 */
+	private _addErrorPanel() {
+		const parentContainer = this._getCardsContainer() as BaseContainer;
+		//set the visibility of cards panel to false
+		this.setVisible(false);
+		if (!this._errorPanel) {
+			this._errorPanel = new ErrorPanel(`${this.getId()}-errorCardsPanel`, {
+				additionalData: [
+					new Button(`${this.getId()}-addInsightsCardsBtn`, {
+						text: this._i18nBundle.getText("addInsightsCardBtn"),
+						type: "Emphasized",
+						press: () => {
+							(this._getCardsContainer() as BaseContainer)
+								?._getLayout()
+								.openSettingsDialog(SETTINGS_PANELS_KEYS.INSIGHTS_CARDS);
+						}
+					})
+				],
+				messageTitle: this._i18nBundle.getText("noAppsTitle"),
+				messageDescription: this._i18nBundle.getText("noInsightsCardsMsg")
+			});
+			this._errorPanel.getData();
+			//Add the menu items and action buttons to the error panel
+			const editCardsMenuItem = this._createEditCardsMenuItem(errorPanelMenuItems.EDIT_CARDS, "manageCards");
+			this._errorPanel.addAggregation("menuItems", editCardsMenuItem);
+			this._sortMenuItems(sortedMenuItems);
+			this._errorPanel.setProperty("enableSettings", true);
+		}
+		//Add the title to the error panel
+		this._errorPanel.setProperty("title", this._i18nBundle?.getText("insightsCards"));
+		this._errorPanel.setVisible(true);
+		parentContainer.addAggregation("content", this._errorPanel);
+		//set the visibility of header elements of the error panel
+		this._errorPanel.getMenuItems().forEach((item) => {
+			if (item.getId().includes(errorPanelMenuItems.EDIT_CARDS) || item.getId().includes("settings")) {
+				item.setVisible(true);
+			} else {
+				item.setVisible(false);
+			}
+		});
+	}
 	/**
 	 * Sets the new visible cards in the model and updates the UI.
 	 * @private
@@ -965,15 +1043,15 @@ export default class CardsPanel extends BasePanel {
 			rowSize: this.cardHeight,
 			gap: "1rem"
 		});
-		this.cardsContainer = new GridContainer(`${this.getId()}-insightsCardsFlexBox`, {
+		this.cardsWrapperContainer = new GridContainer(`${this.getId()}-insightsCardsFlexBox`, {
 			visible: "{= !${/isPhone}}"
 		})
 			.addStyleClass("sapUiSmallMarginTop")
 			.setLayout(this.cardsContainerSettings);
-		this.cardsContainer.setModel(this._controlModel);
-		this.addDragDropConfigTo(this.cardsContainer, (oEvent) => this._handleCardsDnd(oEvent));
+		this.cardsWrapperContainer.setModel(this._controlModel);
+		this.addDragDropConfigTo(this.cardsWrapperContainer, (oEvent) => this._handleCardsDnd(oEvent));
 
-		return this.cardsContainer;
+		return this.cardsWrapperContainer;
 	}
 
 	/**
@@ -1023,9 +1101,9 @@ export default class CardsPanel extends BasePanel {
 		});
 
 		// add HBox as item to GridList
-		const sDefaultAggreName = this._getCardContainer().getMetadata().getDefaultAggregationName();
+		const sDefaultAggreName = this._getCardWrapperContainer().getMetadata().getDefaultAggregationName();
 		if (sDefaultAggreName) {
-			this._getCardContainer().addAggregation(sDefaultAggreName, oPreviewHBox);
+			this._getCardWrapperContainer().addAggregation(sDefaultAggreName, oPreviewHBox);
 		}
 	}
 
@@ -1036,7 +1114,7 @@ export default class CardsPanel extends BasePanel {
 	 * @returns {number} The number of placeholder cards that should be displayed. Defaults to 1 if no valid count is determined.
 	 */
 	private _calculatePlaceholderCardCount(): number {
-		const layoutDomRef = this._getInsightsContainer()?._getLayout()?.getDomRef();
+		const layoutDomRef = this._getCardsContainer()?._getLayout()?.getDomRef();
 		let count = 0;
 		if (layoutDomRef) {
 			const sectionDomRef = layoutDomRef.childNodes[0] as Element;
@@ -1069,14 +1147,11 @@ export default class CardsPanel extends BasePanel {
 	 * @param {ICard[]} aCards - The cards to display.
 	 */
 	private _showCards(aCards: ICard[]) {
-		const panelName = this.getMetadata().getName();
+		const parentContainer = this._getCardsContainer() as BaseContainer;
+		parentContainer.removeContent(this._errorPanel);
 		this.fireHandleUnhidePanel();
-		this._getInsightsContainer()?.updatePanelsItemCount(aCards.length, panelName);
-		if (this._headerVisible) {
-			this.setProperty("title", `${this._i18nBundle?.getText("insightsCards")} (${aCards.length})`);
-		}
-		const sDefaultAggreName = this._getCardContainer().getMetadata().getDefaultAggregationName();
-		this._getCardContainer().removeAllAggregation(sDefaultAggreName);
+		const sDefaultAggreName = this._getCardWrapperContainer().getMetadata().getDefaultAggregationName();
+		this._getCardWrapperContainer().removeAllAggregation(sDefaultAggreName);
 		this.aVisibleCardInstances = [];
 		this.cardsInViewport = [];
 
@@ -1124,8 +1199,8 @@ export default class CardsPanel extends BasePanel {
 			});
 
 			// add VBox as item to GridList
-			const sDefaultAggreName = this._getCardContainer().getMetadata().getDefaultAggregationName();
-			this._getCardContainer().addAggregation(sDefaultAggreName, oPreviewVBox);
+			const sDefaultAggreName = this._getCardWrapperContainer().getMetadata().getDefaultAggregationName();
+			this._getCardWrapperContainer().addAggregation(sDefaultAggreName, oPreviewVBox);
 		});
 	}
 
@@ -1136,38 +1211,13 @@ export default class CardsPanel extends BasePanel {
 	 * @param {Event} event - The event object.
 	 */
 	private _handleEditCards(event: Event) {
-		/* If called from Panel Header event.source() will return TilesPanel, if called from Insights Container event.source() will return InsightsContainer.
+		/* If called from Panel Header event.source() will return TilesPanel, if called from cards Container event.source() will return cardsContainer.
 		_getLayout is available at Container Level*/
 		let parent: ManagedObject = event.getSource<CardsPanel>().getParent() || this;
-		if (parent instanceof CardsPanel) {
+		if (parent instanceof CardsPanel || parent instanceof ErrorPanel) {
 			parent = parent.getParent() as ManagedObject;
 		}
-		(parent as InsightsContainer)?._getLayout().openSettingsDialog(SETTINGS_PANELS_KEYS.INSIGHTS_CARDS);
-	}
-
-	/**
-	 * Hides the header of the cards panel.
-	 *
-	 * @private
-	 */
-	public handleHideHeader() {
-		this._headerVisible = false;
-		this.setProperty("title", "");
-		this._toggleHeaderActions(false);
-	}
-
-	/**
-	 * Adds the header to the cards panel.
-	 *
-	 * @private
-	 */
-	public handleAddHeader() {
-		this._headerVisible = true;
-		this.setProperty(
-			"title",
-			`${this._i18nBundle?.getText("insightsCards")} (${(this._controlModel.getProperty("/userVisibleCards") as ICard[])?.length})`
-		);
-		this._toggleHeaderActions(true);
+		(parent as CardsContainer)?._getLayout().openSettingsDialog(SETTINGS_PANELS_KEYS.INSIGHTS_CARDS);
 	}
 
 	/**
@@ -1204,7 +1254,7 @@ export default class CardsPanel extends BasePanel {
 				await this.updateCardList(sInsertPosition, iDropItemIndex, iDragItemIndex);
 			}
 			setTimeout(() => {
-				focusDraggedItem(this._getCardContainer(), iDropItemIndex);
+				focusDraggedItem(this._getCardWrapperContainer(), iDropItemIndex);
 			}, 0);
 		} catch (error) {
 			if (error instanceof Error) {
@@ -1310,7 +1360,7 @@ export default class CardsPanel extends BasePanel {
 	 * @returns {number} - The number of visible cards.
 	 */
 	private _calculateVisibleCardCount() {
-		const layout = this._getInsightsContainer()._getLayout();
+		const layout = this._getCardsContainer()._getLayout();
 		const pageDomRef = layout.getDomRef();
 		const deviceType = this.getDeviceType();
 		let count = 1;
@@ -1344,7 +1394,7 @@ export default class CardsPanel extends BasePanel {
 	 * @override
 	 */
 	public _adjustLayout() {
-		const layout = this._getInsightsContainer()?._getLayout();
+		const layout = this._getCardsContainer()?._getLayout();
 		let cardWidth = this.cardWidth;
 		const isMobileDevice = this.getDeviceType() === DeviceType.Mobile;
 
@@ -1363,8 +1413,8 @@ export default class CardsPanel extends BasePanel {
 			if (cardCount !== this.cardsInViewport.length) {
 				this.cardsInViewport = this.aVisibleCardInstances.slice(0, cardCount);
 
-				const sDefaultAggreName = this._getCardContainer().getMetadata().getDefaultAggregationName();
-				this._getCardContainer().removeAllAggregation(sDefaultAggreName);
+				const sDefaultAggreName = this._getCardWrapperContainer().getMetadata().getDefaultAggregationName();
+				this._getCardWrapperContainer().removeAllAggregation(sDefaultAggreName);
 				this.cardsInViewport.forEach((card) => {
 					const manifest = card.getManifest() as ICardManifest;
 					const sType = manifest["sap.card"]?.type;
@@ -1387,31 +1437,22 @@ export default class CardsPanel extends BasePanel {
 					if (overlayHBoxWrapper) {
 						cardWrapper.addItem(overlayHBoxWrapper);
 					}
-					const sDefaultAggreName = this._getCardContainer().getMetadata().getDefaultAggregationName();
-					this._getCardContainer().addAggregation(sDefaultAggreName, cardWrapper);
+					const sDefaultAggreName = this._getCardWrapperContainer().getMetadata().getDefaultAggregationName();
+					this._getCardWrapperContainer().addAggregation(sDefaultAggreName, cardWrapper);
 				});
 
 				this.shareCardsInViewport();
 			}
-
-			// show/hide Full Screen Button if available
+			// show/hide full screen button
 			const showFullScreenButton = isElementExpanded || this.aVisibleCardInstances.length > cardCount;
-			if (this._headerVisible) {
-				this._getInsightsContainer()?.toggleFullScreenElements(this, showFullScreenButton);
-			} else {
-				const fullScreenButton = getAssociatedFullScreenMenuItem(this);
-				const fullScreenText = fullScreenButton?.getTitle();
-				this._getInsightsContainer()?.updateMenuItem(
-					this._controlMap.get(`${this.getId()}-${cardsContainerMenuItems.SHOW_MORE}`) as MenuItem,
-					showFullScreenButton,
-					fullScreenText
-				);
-				this._getInsightsContainer()?.updateActionButton(
-					this._controlMap.get(`${this.getId()}-${cardsContainerActionButtons.SHOW_MORE}`) as Button,
-					showFullScreenButton,
-					fullScreenText
-				);
-			}
+			const fullScreenButton = getAssociatedFullScreenMenuItem(this);
+			const fullScreenText = fullScreenButton.getTitle();
+			//update the panel menu-item show more button and show more action button in panel header
+			fullScreenButton?.setVisible(showFullScreenButton);
+			fullScreenButton?.setTitle(fullScreenText);
+			const fullScreenActionButton = getAssociatedFullScreenButton(this);
+			fullScreenActionButton?.setVisible(showFullScreenButton);
+			fullScreenActionButton?.setText(fullScreenText);
 		} else {
 			this.cardWidth = this.getDeviceType() === DeviceType.Mobile ? "19rem" : "22rem";
 		}
@@ -1423,53 +1464,17 @@ export default class CardsPanel extends BasePanel {
 		}
 	}
 
-	/**
-	 * Retrieves the menu items for the container.
-	 *
-	 * @private
-	 * @returns {MenuItem[]} An array of MenuItem instances.
-	 */
-	public getContainerMenuItems(): MenuItem[] {
-		if (!this._containerMenuItems) {
-			const containerRefreshMenuItem = this._createRefreshMenuItem(cardsContainerMenuItems.REFRESH, "containerCardsRefresh");
-			const containerEditCardsMenuItem = this._createEditCardsMenuItem(cardsContainerMenuItems.EDIT_CARDS, "containerManageCards");
-			const containerShowMoreMenuItem = createShowMoreMenuItem(this, cardsContainerMenuItems.SHOW_MORE, "containerCardsShowMore");
-			this._controlMap.set(`${this.getId()}-${cardsContainerMenuItems.SHOW_MORE}`, containerShowMoreMenuItem);
-			this._containerMenuItems = [containerRefreshMenuItem, containerEditCardsMenuItem, containerShowMoreMenuItem];
-		}
-		return this._containerMenuItems;
-	}
-
-	/**
-	 * Retrieves the action buttons for the container.
-	 *
-	 * @private
-	 * @returns {Button[]} An array of Button instances.
-	 */
-	public getContainerActionButtons(): Button[] {
-		if (!this._containerActionButtons) {
-			this._containerActionButtons = [];
-			const actionButton = createShowMoreActionButton(this, cardsContainerActionButtons.SHOW_MORE, "containerCardsShowMore");
-			if (actionButton) {
-				this._controlMap.set(`${this.getId()}-${cardsContainerActionButtons.SHOW_MORE}`, actionButton);
-				this._containerActionButtons.push(actionButton);
-			}
-		}
-
-		return this._containerActionButtons;
-	}
-
 	/**
 	 * Retrieves the insights container.
 	 *
 	 * @private
-	 * @returns {InsightsContainer} - The insights container.
+	 * @returns {CardsContainer} - The cards container.
 	 */
-	private _getInsightsContainer(): InsightsContainer {
-		if (!this.insightsContainer) {
-			this.insightsContainer = this.getParent() as InsightsContainer;
+	private _getCardsContainer(): CardsContainer {
+		if (!this.cardsContainer) {
+			this.cardsContainer = this.getParent() as CardsContainer;
 		}
-		return this.insightsContainer;
+		return this.cardsContainer;
 	}
 
 	/**
@@ -1517,21 +1522,6 @@ export default class CardsPanel extends BasePanel {
 		return menuItem;
 	}
 
-	/**
-	 * Toggles the visibility of the header actions.
-	 *
-	 * @param {boolean} bShow - Whether to show or hide the header actions.
-	 * @private
-	 */
-	private _toggleHeaderActions(bShow: boolean) {
-		(this.getAggregation("menuItems") as MenuItem[])?.forEach((menuItem) => {
-			this._getInsightsContainer()?.toggleMenuListItem(menuItem, bShow);
-		});
-		(this.getAggregation("actionButtons") as Button[])?.forEach((actionButton) =>
-			this._getInsightsContainer()?.toggleActionButton(actionButton, bShow)
-		);
-	}
-
 	/**
 	 * Retrieves the card container based on the device type.
 	 *
@@ -1539,24 +1529,11 @@ export default class CardsPanel extends BasePanel {
 	 * @returns {GridContainer | HeaderContainer} - The card container.
 	 *
 	 */
-	private _getCardContainer() {
+	private _getCardWrapperContainer() {
 		if (this.getDeviceType() === DeviceType.Mobile) {
 			return this.cardsMobileContainer;
 		}
-		return this.cardsContainer;
-	}
-
-	/**
-	 * Sorts the menu items based on the provided order.
-	 *
-	 * @private
-	 * @param {string[]} menuItems - The order of the menu items.
-	 */
-	private _sortMenuItems(menuItems: string[]) {
-		const panelMenuItems = this.getAggregation("menuItems") as MenuItem[];
-		let sortedMenuItems = sortMenuItems(menuItems, panelMenuItems);
-		this.removeAllAggregation("menuItems");
-		sortedMenuItems?.forEach((menuItem) => this.addAggregation("menuItems", menuItem));
+		return this.cardsWrapperContainer;
 	}
 
 	/**

package/src/sap/cux/home/ContentAdditionDialog.d.ts

@@ -23,6 +23,7 @@ declare module "sap/cux/home/ContentAdditionDialog" {
         private cancelButton;
         private panelsAdded;
         private errorMessageContainer;
+        private _appsAdditionPanel;
         static renderer: {
             apiVersion: number;
         };
@@ -33,6 +34,7 @@ declare module "sap/cux/home/ContentAdditionDialog" {
          * @override
          */
         init(): void;
+        onAfterRendering(): void;
         /**
          * Sets up the dialog content with an icon tab bar and error message container.
          *

package/src/sap/cux/home/ContentAdditionDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContentAdditionDialog.d.ts","sourceRoot":"../../../../..","sources":["src/sap/cux/home/ContentAdditionDialog.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,oCAAoC,CAAC;IACpD;;;OAGG;IAEH,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,QAAQ,CAAC;IAW9C,OAAO,kBAAkB,MAAM,iCAAiC,CAAC;IAOjE;;;;;;;;;;;;OAYG;IACH,MAAM,CAAC,OAAO,OAAO,qBAAsB,SAAQ,kBAAkB;QACpE,OAAO,CAAC,UAAU,CAAc;QAChC,OAAO,CAAC,YAAY,CAAU;QAC9B,OAAO,CAAC,WAAW,CAAW;QAC9B,OAAO,CAAC,qBAAqB,CAAW;QAExC,MAAM,CAAC,QAAQ;;UAEb;QAEF;;;;;WAKG;QACI,IAAI,IAAI,IAAI;QAoBnB;;;;WAIG;QACH,OAAO,CAAC,mBAAmB;QAiC3B;;;;;;WAMG;QACI,iBAAiB,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI;QAclD;;;;;WAKG;gBACW,sBAAsB;QA8BpC;;;;;;WAMG;QACH,OAAO,CAAC,iBAAiB;QASzB;;;;WAIG;QACI,mBAAmB,IAAI,IAAI;QA0BlC;;;;WAIG;QACH,OAAO,CAAC,aAAa;KAGrB;CAEA"}
+{"version":3,"file":"ContentAdditionDialog.d.ts","sourceRoot":"../../../../..","sources":["src/sap/cux/home/ContentAdditionDialog.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,oCAAoC,CAAC;IACpD;;;OAGG;IAEH,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,QAAQ,CAAC;IAW9C,OAAO,kBAAkB,MAAM,iCAAiC,CAAC;IAQjE;;;;;;;;;;;;OAYG;IACH,MAAM,CAAC,OAAO,OAAO,qBAAsB,SAAQ,kBAAkB;QACpE,OAAO,CAAC,UAAU,CAAc;QAChC,OAAO,CAAC,YAAY,CAAU;QAC9B,OAAO,CAAC,WAAW,CAAW;QAC9B,OAAO,CAAC,qBAAqB,CAAW;QACxC,OAAO,CAAC,kBAAkB,CAAqB;QAE/C,MAAM,CAAC,QAAQ;;UAEb;QAEF;;;;;WAKG;QACI,IAAI,IAAI,IAAI;QAuBZ,gBAAgB;QAMvB;;;;WAIG;QACH,OAAO,CAAC,mBAAmB;QAiC3B;;;;;;WAMG;QACI,iBAAiB,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI;QAWlD;;;;;WAKG;gBACW,sBAAsB;QA8BpC;;;;;;WAMG;QACH,OAAO,CAAC,iBAAiB;QASzB;;;;WAIG;QACI,mBAAmB,IAAI,IAAI;QA0BlC;;;;WAIG;QACH,OAAO,CAAC,aAAa;KAGrB;CAEA"}

package/src/sap/cux/home/ContentAdditionDialog.js

@@ -2,7 +2,7 @@
  * SAP UI development toolkit for HTML5 (SAPUI5)
  *  * (c) Copyright 2009-2025 SAP SE. All rights reserved
  */
-sap.ui.define(["sap/m/Button", "sap/m/FlexBox", "sap/m/IconTabBar", "sap/m/IconTabFilter", "sap/m/IllustratedMessage", "sap/m/IllustratedMessageSize", "sap/m/IllustratedMessageType", "sap/m/library", "./AppsAdditionPanel", "./BaseSettingsDialog", "./InsightsAdditionPanel", "./utils/Constants", "./utils/FESRUtil", "./utils/PXFeedback"], function (Button, FlexBox, IconTabBar, IconTabFilter, IllustratedMessage, IllustratedMessageSize, IllustratedMessageType, sap_m_library, __AppsAdditionPanel, __BaseSettingsDialog, __InsightsAdditionPanel, ___utils_Constants, ___utils_FESRUtil, ___utils_PXFeedback) {
+sap.ui.define(["sap/m/Button", "sap/m/FlexBox", "sap/m/IconTabBar", "sap/m/IconTabFilter", "sap/m/IllustratedMessage", "sap/m/IllustratedMessageSize", "sap/m/IllustratedMessageType", "sap/m/library", "./AppsAdditionPanel", "./BaseSettingsDialog", "./InsightsAdditionPanel", "./utils/Constants", "./utils/DataFormatUtils", "./utils/FESRUtil", "./utils/PXFeedback"], function (Button, FlexBox, IconTabBar, IconTabFilter, IllustratedMessage, IllustratedMessageSize, IllustratedMessageType, sap_m_library, __AppsAdditionPanel, __BaseSettingsDialog, __InsightsAdditionPanel, ___utils_Constants, ___utils_DataFormatUtils, ___utils_FESRUtil, ___utils_PXFeedback) {
   "use strict";
 
   function _interopRequireDefault(obj) {
@@ -169,6 +169,7 @@ sap.ui.define(["sap/m/Button", "sap/m/FlexBox", "sap/m/IconTabBar", "sap/m/IconT
   const BaseSettingsDialog = _interopRequireDefault(__BaseSettingsDialog);
   const InsightsAdditionPanel = _interopRequireDefault(__InsightsAdditionPanel);
   const FESR_IDS = ___utils_Constants["FESR_IDS"];
+  const recycleId = ___utils_DataFormatUtils["recycleId"];
   const addFESRSemanticStepName = ___utils_FESRUtil["addFESRSemanticStepName"];
   const FESR_EVENTS = ___utils_FESRUtil["FESR_EVENTS"];
   const triggerPXIntegration = ___utils_PXFeedback["triggerPXIntegration"];
@@ -206,14 +207,22 @@ sap.ui.define(["sap/m/Button", "sap/m/FlexBox", "sap/m/IconTabBar", "sap/m/IconT
       this.setTitle(this._i18nBundle.getText("addContent"));
       this.addStyleClass("sapCuxContentAdditionDialog");
       this.attachAfterClose(this.onDialogClose.bind(this));
+      //update action buttons to be displayed before dialog opens
+      this.attachBeforeOpen(this.updateActionButtons.bind(this));
 
       //setup panels
-      this.addPanel(new AppsAdditionPanel(`${this.getId()}-appsAdditionPanel`));
-      this.addPanel(new InsightsAdditionPanel(`${this.getId()}-cardsAdditionPanel`));
+      this._appsAdditionPanel = new AppsAdditionPanel(recycleId(`${this.getId()}-appsAdditionPanel`));
+      this.addPanel(this._appsAdditionPanel);
+      this.addPanel(new InsightsAdditionPanel(recycleId(`${this.getId()}-cardsAdditionPanel`)));
 
       //setup content
       this._setupDialogContent();
     },
+    onAfterRendering: function _onAfterRendering() {
+      setTimeout(() => {
+        this._appsAdditionPanel?.setIllustrationSize();
+      }, 0);
+    },
     /**
      * Sets up the dialog content with an icon tab bar and error message container.
      *
@@ -263,9 +272,6 @@ sap.ui.define(["sap/m/Button", "sap/m/FlexBox", "sap/m/IconTabBar", "sap/m/IconT
       //set selected key
       const selectedKey = this.getProperty("selectedKey") || this.getPanels()[0]?.getProperty("key");
       this.iconTabBar.setSelectedKey(selectedKey);
-
-      //update action buttons to be displayed
-      this.updateActionButtons();
     },
     /**
      * Adds supported panels to the icon tab bar.