@sapui5/sap.cux.home 1.142.0 → 1.142.1

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,13 @@ 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;
+	private cardHelper: Promise<ICardHelperInstance> | null = null;
 
 	constructor(idOrSettings?: string | $CardsPanelSettings);
 	constructor(id?: string, settings?: $CardsPanelSettings);
@@ -205,6 +190,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";
@@ -233,7 +219,6 @@ export default class CardsPanel extends BasePanel {
 			"importChannel",
 			"cardsImport",
 			async (sChannelId?: string, sEventId?: string, oData?) => {
-				await this.initializeCardHelper();
 				await this._createCards(oData as ICardManifest[]);
 				this._importdone();
 			},
@@ -279,7 +264,8 @@ export default class CardsPanel extends BasePanel {
 	 * @returns {any}
 	 */
 	private async _createCards(aCards: ICardManifest[]) {
-		await this.cardHelperInstance?._createCards(aCards);
+		const cardHelper = await this.getCardHelper();
+		await cardHelper?._createCards(aCards);
 		return this.rerenderCards();
 	}
 
@@ -334,10 +320,8 @@ export default class CardsPanel extends BasePanel {
 					) as object;
 				}
 				if (oCheckSemanticProperty && Object.keys(oCheckSemanticProperty).length) {
-					oParameters = this.cardHelperInstance.processSemanticDate(
-						oParameters,
-						oIntegrationCardManifest
-					) as ICardActionParameters;
+					const cardHelper = await this.getCardHelper();
+					oParameters = cardHelper?.processSemanticDate(oParameters, oIntegrationCardManifest) as ICardActionParameters;
 				}
 
 				let aContentActions = this.getContentActions(oIntegrationCardManifest);
@@ -383,9 +367,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");
@@ -416,7 +398,8 @@ export default class CardsPanel extends BasePanel {
 				visible: async (oCard: Card) => {
 					return this._getManifestEntryFromCard(oCard, "sap.insights").then(async (oEntry: ICardManifest | undefined) => {
 						if (oEntry) {
-							const parentApp = await this.cardHelperInstance.getParentAppDetails({
+							const cardHelper = await this.getCardHelper();
+							const parentApp = await cardHelper?.getParentAppDetails({
 								descriptorContent: oCard.getManifestEntry("/") as ICardManifest
 							});
 							if (parentApp.semanticObject && parentApp.action) {
@@ -440,7 +423,8 @@ export default class CardsPanel extends BasePanel {
 					});
 				},
 				action: async (oCard: Card) => {
-					const parentApp = await this.cardHelperInstance.getParentAppDetails({
+					const cardHelper = await this.getCardHelper();
+					const parentApp = await cardHelper?.getParentAppDetails({
 						descriptorContent: oCard.getManifestEntry("/") as ICardManifest
 					});
 					const sShellHash = parentApp.semanticURL || parentApp.semanticObject;
@@ -563,21 +547,22 @@ export default class CardsPanel extends BasePanel {
 	}
 
 	/**
-	 * Initializes the card helper and page manager if not already done.
+	 * Retrieves the Card Helper instance.
 	 *
 	 * @private
-	 * @returns {Promise<void>}
+	 * @returns {Promise<ICardHelperInstance>} A promise that resolves with the Card Helper instance.
 	 */
-	private async initializeCardHelper(): Promise<void> {
+	private async getCardHelper(): Promise<ICardHelperInstance> {
 		if (!this.cardHelperInstance) {
 			this.pageManagerInstance = this.pageManagerInstance || getPageManagerInstance(this);
 			const [cardHelperInstance, hasCustomSpace] = await Promise.all([
-				(CardHelper as ICardHelper).getServiceAsync(),
+				this.getCardHelperService(),
 				this.pageManagerInstance.hasCustomSpace()
 			]);
 			this.cardHelperInstance = cardHelperInstance;
 			this.hasCustomSpace = hasCustomSpace;
 		}
+		return this.cardHelperInstance;
 	}
 	/**
 	 * Renders the panel.
@@ -586,9 +571,36 @@ export default class CardsPanel extends BasePanel {
 	 * @returns {Promise<void>} A promise that resolves when the panel is rendered.
 	 */
 	public async renderPanel(): Promise<void> {
-		await this.initializeCardHelper();
-		await this.rerenderCards();
-		this.fireEvent("loaded");
+		try {
+			await this.rerenderCards();
+			this.fireEvent("loaded");
+		} catch (error) {
+			Log.error(error instanceof Error ? error.message : String(error));
+		}
+	}
+
+	/**
+	 * 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);
+		}
 	}
 
 	/**
@@ -603,13 +615,14 @@ 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 cardHelper = await this.getCardHelper();
 						const preferedCardIDs = this.hasCustomSpace ? PREFERED_CARDS : [];
-						const userVisibleCardModel = await this.cardHelperInstance?._getUserVisibleCardModel(preferedCardIDs);
+						const userVisibleCardModel = await cardHelper._getUserVisibleCardModel(preferedCardIDs);
 						const aCards = userVisibleCardModel.getProperty("/cards") as ICard[];
 						const listBinding = userVisibleCardModel?.bindList("/cards");
 						if (!listBinding.hasListeners("change")) {
@@ -618,9 +631,16 @@ export default class CardsPanel extends BasePanel {
 								await (this._cardsRendered ?? Promise.resolve());
 								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 +650,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 +665,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(false);
 						this._cardsRendered = undefined;
 						if (error instanceof Error) {
 							Log.error(error.message);
@@ -654,13 +690,61 @@ export default class CardsPanel extends BasePanel {
 		}
 		return this._cardsRendered;
 	}
+
+	/**
+	 * Adds an error panel when no cards are available.
+	 *
+	 * @private
+	 */
+	private _addErrorPanel(showActions: boolean = true) {
+		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);
+		}
+		(this._errorPanel.getProperty("additionalData") as Control[]).forEach((control) => control.setVisible(showActions));
+		//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) && showActions) || item.getId().includes("settings")) {
+				item.setVisible(true);
+			} else {
+				item.setVisible(false);
+			}
+		});
+	}
 	/**
 	 * Sets the new visible cards in the model and updates the UI.
 	 * @private
 	 */
 	private async setNewVisibleCards() {
+		const cardHelper = await this.getCardHelper();
 		const preferedCardIDs = this.hasCustomSpace ? PREFERED_CARDS : [];
-		const visibleCardModel = await this.cardHelperInstance._getUserVisibleCardModel(preferedCardIDs);
+		const visibleCardModel = await cardHelper?._getUserVisibleCardModel(preferedCardIDs);
 		const aNewCards = visibleCardModel.getProperty("/cards") as ICard[];
 		this._controlModel.setProperty("/userVisibleCards", aNewCards);
 		this._showCards(aNewCards);
@@ -702,7 +786,8 @@ export default class CardsPanel extends BasePanel {
 			const aUpdatedCards = await this.regenerateCards(uniqueManifestDetails, manifestIds);
 			if (aUpdatedCards?.length) {
 				// Update the model with updated cards
-				await this.cardHelperInstance._updateCards(
+				const cardHelper = await this.getCardHelper();
+				await cardHelper?._updateCards(
 					aUpdatedCards.map((oCard: ICardDetails) => oCard?.newManifest?.descriptorContent) as ICardManifest[]
 				);
 			} else {
@@ -931,7 +1016,8 @@ export default class CardsPanel extends BasePanel {
 	 */
 	private async _handleRecommendationCards(aRecommendedCards: ICard[]) {
 		const cardManifests = aRecommendedCards.map((oCard) => oCard.descriptorContent);
-		await this.cardHelperInstance?._createCards(cardManifests);
+		const cardHelper = await this.getCardHelper();
+		await cardHelper?._createCards(cardManifests);
 		await this._updateRecommendationStatus();
 		return this.setNewVisibleCards();
 	}
@@ -965,15 +1051,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 +1109,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 +1122,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 +1155,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 +1207,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 +1219,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);
 	}
 
 	/**
@@ -1197,14 +1255,15 @@ export default class CardsPanel extends BasePanel {
 		// take the moved item from dragIndex and add to dropindex
 		try {
 			if (!(this._controlModel.getProperty("/userAllCards") as ICard[]).length) {
-				const userAllCardsModel = await this.cardHelperInstance._getUserAllCardModel();
+				const cardHelper = await this.getCardHelper();
+				const userAllCardsModel = await cardHelper?._getUserAllCardModel();
 				this._controlModel.setProperty("/userAllCards", userAllCardsModel.getProperty("/cards"));
 				await this.updateCardList(sInsertPosition, iDropItemIndex, iDragItemIndex);
 			} else {
 				await this.updateCardList(sInsertPosition, iDropItemIndex, iDragItemIndex);
 			}
 			setTimeout(() => {
-				focusDraggedItem(this._getCardContainer(), iDropItemIndex);
+				focusDraggedItem(this._getCardWrapperContainer(), iDropItemIndex);
 			}, 0);
 		} catch (error) {
 			if (error instanceof Error) {
@@ -1245,12 +1304,9 @@ export default class CardsPanel extends BasePanel {
 			iUpdatedDropItemIndex++;
 		}
 		if (iUpdatedDragItemIndex !== iUpdatedDropItemIndex) {
-			const aUpdatedCards = this.cardHelperInstance.handleDndCardsRanking(
-				iUpdatedDragItemIndex,
-				iUpdatedDropItemIndex,
-				aUserAllCards
-			);
-			await this.cardHelperInstance._updateMultipleCards(aUpdatedCards, "PUT");
+			const cardHelper = await this.getCardHelper();
+			const aUpdatedCards = cardHelper?.handleDndCardsRanking(iUpdatedDragItemIndex, iUpdatedDropItemIndex, aUserAllCards);
+			await cardHelper?._updateMultipleCards(aUpdatedCards, "PUT");
 			this._sortCardsOnRank(aUserAllCards);
 			this._controlModel.setProperty("/userAllCards", aUserAllCards);
 			this._controlModel.setProperty(
@@ -1310,7 +1366,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 +1400,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 +1419,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 +1443,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 +1470,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 +1528,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 +1535,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;
 	}
 
 	/**
@@ -1583,4 +1566,32 @@ export default class CardsPanel extends BasePanel {
 		runtimeHostCreated = false;
 		(this.getAggregation("host") as Host)?.destroy();
 	}
+
+	/**
+	 * Initializes the CardHelper service promise.
+	 *
+	 * @private
+	 * @returns {Promise<ICardHelperInstance>} - card helper service.
+	 */
+	private getCardHelperService(): Promise<ICardHelperInstance> {
+		if (this.cardHelper === null) {
+			this.cardHelper = (CardHelper as ICardHelper).getServiceAsync();
+		}
+		return this.cardHelper;
+	}
+
+	/**
+	 * Checks if insights service is enabled.
+	 *
+	 * @private
+	 * @returns {Promise<boolean>} - true if insights service is enabled else false.
+	 */
+	public async isInsightsEnabled(): Promise<boolean> {
+		try {
+			return (await this.getCardHelperService()) !== null;
+		} catch (error) {
+			Log.error(error instanceof Error ? error.message : String(error));
+			return false;
+		}
+	}
 }