@sapui5/sap.ushell 1.138.1 → 1.139.0

package/src/main/js/sap/ushell/components/shell/SearchCEPNew/Component.js

@@ -0,0 +1,420 @@
+// Copyright (c) 2009-2025 SAP SE, All Rights Reserved
+
+sap.ui.define([
+    "sap/ui/core/Element",
+    "sap/ui/core/Component",
+    "sap/base/Log",
+    "sap/ushell/resources",
+    "sap/ushell/utils",
+    "sap/ushell/Container",
+    "sap/ushell/EventHub",
+    "sap/ushell/components/shell/SearchCEPNew/SearchProviders/SearchProvider",
+    "sap/ushell/gen/ui5/webcomponents-fiori/dist/ShellBarSearch",
+    "sap/ushell/gen/ui5/webcomponents-fiori/dist/SearchItem",
+    "sap/ushell/gen/ui5/webcomponents-fiori/dist/SearchItemGroup",
+    "sap/ushell/gen/ui5/webcomponents-fiori/dist/SearchMessageArea",
+    "sap/ushell/gen/ui5/webcomponents/dist/Button",
+    "sap/ui/model/json/JSONModel",
+    "sap/base/util/deepEqual"
+], (
+    Element,
+    Component,
+    Log,
+    resources,
+    ushellUtils,
+    Container,
+    EventHub,
+    SearchProvider,
+    ShellBarSearch,
+    SearchItem,
+    SearchItemGroup,
+    SearchMessageArea,
+    Button,
+    JSONModel,
+    deepEqual
+) => {
+    "use strict";
+
+    /**
+     * @name sap.ushell.components.shell.SearchCEPNew
+     * @alias sap.ushell.components.shell.SearchCEPNew.Component
+     * @description
+     * This namespace contains the SearchCEPNew component for the SAP Fiori Launchpad.
+     * It provides a new search experience with enhanced features and improved performance.
+     * It is designed to replace the legacy search component and is optimized for the latest UI5
+     * standards and best practices.
+     */
+    return Component.extend("sap.ushell.components.shell.SearchCEPNew.Component", {
+        metadata: {
+            manifest: "json",
+            library: ["sap.ushell", "sap.ushell.components.shell"]
+        },
+
+        searchProviderMap: {
+            RecentSearchesList: "recentSearches",
+            AppsList: "applications",
+            //evaluate whether to change to FrequentlyUsedItemsList (including products)
+            FrequentlyUsedAppsList: "frequentApplications",
+            ProductsList: "products",
+            ExternalSearchAppsList: "externalSearchApplications"
+        },
+
+        iGroupMaxItemCount: 10,
+
+        init: function () {
+            this._init();
+        },
+
+        /**
+         * Initializes the component, sets up the search field, and registers default providers.
+         * @private
+         */
+        _init: async function () {
+            this._oSearchCEPService = await Container.getServiceAsync("SearchCEP");
+            this._oResultModel = new JSONModel({});
+            this._oI18nModel = await this.getModel("i18n").getResourceBundle();
+
+            this._bIsMyHome = Container.getFLPPlatform(true) === "MYHOME";
+
+            this.oShellHeader = Element.getElementById("shell-header");
+
+            this._initSearchField();
+            this._registerDefaultProviders();
+            this._aDoables = [];
+            this._listenToEvents();
+        },
+
+        /**
+         * Initializes the search field and binds the result model and actions.
+         * @private
+         */
+        _initSearchField: function () {
+            try {
+                this._oSearchField = new ShellBarSearch({
+                    id: "cepSearchNewInBarJS",
+                    placeholder: resources.i18n.getText("searchAppTitle"),
+                    tooltip: "{i18n>search}",
+                    open: false,
+                    showClearIcon: true
+                });
+                this._oSearchField.setModel(this._oResultModel, "searchResults");
+                this._oSearchField.bindAggregation("items", {
+                    path: "searchResults>/results",
+                    factory: this._searchItemGroupFactory.bind(this)
+                });
+
+                this._oSearchField.addMessageArea(new SearchMessageArea({
+                    id: "searchMessageArea",
+                    text: "Message area text placeholder w.o. i18n",
+                    description: "Search for example “All my open Objects”",
+                    visible: true
+                }));
+                this._attachSearchEventHandlers();
+                this.oShellHeader = Element.getElementById("shell-header");
+                this.oShellHeader.setSearch(this._oSearchField);
+            } catch (error) {
+                Log.error("Failed to create CEP search field content", error);
+            }
+        },
+        /**
+         * Attach all relevant event handlers to the search field
+         * @private
+         */
+        _attachSearchEventHandlers: function () {
+            this._oSearchField.attachSearch(this._onSearch.bind(this));
+            this._oSearchField.attachInput(this._onInputChange.bind(this));
+        },
+
+        /**
+         * Factory for creating search item groups for the search field.
+         * @param {string} sId The ID for the search item group.
+         * @param {object} oGroupContext The context for the group, containing header text and items.
+         * @private
+         * @returns {SearchItemGroup} The created search item group.
+         * */
+        _searchItemGroupFactory: function (sId, oGroupContext) {
+            const oGroup = new SearchItemGroup({
+                id: sId,
+                headerText: oGroupContext.getProperty("headerText"),
+                items: {
+                    path: `searchResults>${oGroupContext.getPath()}/items`,
+                    model: "searchResults",
+                    length: this.iGroupMaxItemCount,
+                    template: new SearchItem({
+                        text: "{searchResults>text}",
+                        icon: "{searchResults>icon}",
+                        description: "{searchResults>contentProviderLabel}",
+                        delete: (oEvent) => {
+                            // TODO Handle delete action for the item through UserRecents service and recents Activity - add onDelete there
+                            // Removing the item from the shellbarsearch items aggregation only temporarily removes it
+                            oEvent.getSource().getParent().removeItem(oEvent.getSource());
+                        }
+                    })
+                }
+            });
+            return oGroup;
+        },
+
+        /**
+         * Registers default search providers with the SearchCEP service.
+         * @private
+         * */
+        _registerDefaultProviders: async function () {
+            Object.values(SearchProvider.getDefaultProviders(this._oI18nModel)).forEach(async (oProvider) => {
+                await this._oSearchCEPService.registerDefaultSearchProvider(oProvider);
+            });
+        },
+
+        /**
+         * Listens to events from the EventHub to update search providers and handle search state changes.
+         * @private
+         * */
+        _listenToEvents: function () {
+            this._aDoables.push(EventHub.on("updateExtProviderLists").do(this._updateExtProviderLists.bind(this, this._oSearchCEPService)));
+        },
+
+        /**
+         * Debounced handler for input changes in the search field.
+         * @private
+         */
+        _onInputChange: function () {
+            clearTimeout(this._suggestionTimeout);
+            this._suggestionTimeout = setTimeout(() => {
+                this._fetchSuggestions(this._oSearchField.getValue());
+            }, 100);
+        },
+
+        /**
+         * Fetches suggestions from all registered search providers and updates the model.
+         * @param {string} sQuery The search query string.
+         * @private
+         */
+        _fetchSuggestions: async function (sQuery) {
+            try {
+                const oSearchCEPService = this._oSearchCEPService;
+                const aProviders = await oSearchCEPService.getSearchProvidersPriorityArray();
+                const aProviderSearchPromises = aProviders.map((oProvider) => {
+                    const iQueryLength = (sQuery || "").trim().length;
+
+                    if (iQueryLength >= oProvider.minQueryLength && iQueryLength <= oProvider.maxQueryLength) {
+                        return oProvider.execSearch(sQuery, this._getDefaultProviderGroupName(oProvider.id));
+                    }
+                    return Promise.resolve([]);
+                });
+                const aSearchResults = await Promise.all(aProviderSearchPromises);
+                this._updateSearchResults(aSearchResults, aProviders);
+            } catch (oError) {
+                Log.error("Error fetching search suggestions", oError);
+            }
+        },
+
+        /**
+         * Updates the search results in the model and only updates if the results have changed.
+         * @param {Array<object>} aSearchResults Array of arrays with search results per provider.
+         * @param {Array<object>} aProviders Array of provider objects.
+         * @private
+         */
+        _updateSearchResults: function (aSearchResults, aProviders) {
+            const aAllResults = aSearchResults.map((aGroupResult, idx) => {
+                return {
+                    headerText: aProviders[idx].title,
+                    items: aGroupResult
+                };
+            });
+            this._oResultModel.setProperty("/allResults", aAllResults);
+
+            const aCountRelevantProviders = ["Applications", "Home Page Applications", "Products"];
+            this._oResultModel.setProperty("/resultCount", aAllResults.reduce((iCount, oGroup) => {
+                return iCount + (oGroup?.items && aCountRelevantProviders.includes(oGroup.headerText) ? oGroup.items.length : 0);
+            }, 0));
+
+            const iEmptyResults = aSearchResults.filter((result) => !result || result.length === 0).length;
+            const aResults = aSearchResults.map((aGroupResult, idx) => {
+                // Workaround, limit the number of results to 11 if less than 3 empty groups, otherwise limit to 4
+                const aSearchResultsLimited = (aGroupResult && aGroupResult.length > 4 && iEmptyResults < 3)
+                    ? aGroupResult.slice(0, 4)
+                    : (aGroupResult || []).slice(0, this.iGroupMaxItemCount);
+                if (aGroupResult && aGroupResult.length > 0) {
+                    return {
+                        headerText: aProviders[idx].title,
+                        items: aSearchResultsLimited
+                    };
+                }
+            });
+            // Check if the results have changed before updating the model, otherwise avoid unnecessary updates to enable autocomplete
+            const aOldResults = this._oResultModel.getProperty("/results");
+            if (aOldResults?.length > 0 && deepEqual(aOldResults[1], aResults[1])) {
+                // No change, do not update model
+                return;
+            }
+            this._oResultModel.setProperty("/results", aResults);
+            this._refreshSearchActionButton();
+        },
+
+        /**
+         * Returns the default provider group name for a given provider ID.
+         * @param {string} sProviderId The provider ID.
+         * @returns {string} The group name.
+         * @private
+         */
+        _getDefaultProviderGroupName: function (sProviderId) {
+            return this.searchProviderMap[sProviderId];
+        },
+
+        /**
+         * Updates the external provider lists and triggers suggestions if needed.
+         * @private
+         */
+        _updateExtProviderLists: async function () {
+            const aExtProviders = await this._oSearchCEPService.getExternalSearchProvidersPriorityArray();
+            aExtProviders.forEach((oProvider) => {
+                const oGroup = new SearchItemGroup({
+                    headerText: oProvider.title
+                });
+                this._oSearchField.addItem(oGroup);
+            });
+            if (aExtProviders.length > 0 && this._oSearchField.getOpen()) {
+                this._fetchSuggestions(this._oSearchField.getValue());
+            }
+        },
+
+        /**
+         * Handles the search event, determines navigation target, and saves the search term.
+         * @param {object} oEvent The search event object.
+         * @private
+         */
+        _onSearch: async function (oEvent) {
+            const oItem = oEvent.getParameter("item");
+            const oSearchContext = {
+                searchFieldValue: this._oSearchField.getValue ? this._oSearchField.getValue() : this._oSearchField.getParent().getValue(),
+                selectedItemContext: oItem?.getBindingContext ? oItem.getBindingContext("searchResults").getObject() : null
+            };
+            //Case 1: If an item is selected, save the search term and navigate to the app or add a recent search term to the search field.
+            if (oSearchContext?.selectedItemContext !== null) {
+                this._saveSearchTerm(oSearchContext.searchFieldValue);
+                if (oItem.getParent().getHeaderText() === this._oI18nModel.getText("recentSearches")) {
+                    this._navigateToResultPage(oSearchContext.selectedItemContext.text);
+                    this._resetSearchState(true);
+                } else if (this._bIsMyHome || oSearchContext.selectedItemContext) {
+                    // Todo: Remove OR once bIsMyHome is clear and tested
+                    this._navigateToApp(oSearchContext.selectedItemContext, oSearchContext.searchFieldValue);
+                    this._resetSearchState(true);
+                }
+                //Case 2: If no item is selected, but an input has been made, save the search term and navigate to the results page.
+            } else if (oSearchContext.searchFieldValue !== "" && typeof oSearchContext.searchFieldValue === "string") {
+                this._saveSearchTerm(oSearchContext.searchFieldValue);
+                this._navigateToResultPage(oSearchContext.searchFieldValue);
+                this._resetSearchState();
+                //Case 3: If no item is selected and no input has been made, reset the search state.
+            } else {
+                // Set Searchfield to open if it is not, it's empty and the input element is existent (meaning it's expanded)
+                // Workaround to show suggestions, remove after FIORITECHP1-33982 done
+                await ushellUtils.awaitTimeout(50);
+                if (!this._oSearchField.getOpen()
+                    && this._oSearchField.getValue() === ""
+                    && this._oSearchField.getDomRef().shadowRoot.querySelector(".ui5-search-field-root")
+                ) {
+                    this._fetchSuggestions("");
+                    this._oSearchField.setOpen(true);
+                }
+            }
+        },
+
+        /**
+         * Saves the search term to the UserRecents service.
+         * @param {string} sTerm The search term to save.
+         * @private
+         */
+        _saveSearchTerm: async function (sTerm) {
+            if (!sTerm) {
+                return;
+            }
+            const UserRecents = await Container.getServiceAsync("UserRecents");
+            await UserRecents.addSearchActivity({ sTerm });
+        },
+
+        /**
+         * Navigates to the selected app using the SearchCEP service.
+         * @param {object} oResult The selected search result item.
+         * @param {string} sSearchTerm The search term.
+         * @private
+         */
+        _navigateToApp: function (oResult, sSearchTerm) {
+            this._oSearchCEPService.navigate(oResult, sSearchTerm);
+        },
+
+        /**
+         * Navigates to the search results page with the given search term.
+         * @param {string} sTerm The search term.
+         * @param {boolean} [bAll] Whether to show all results.
+         * @private
+         */
+        _navigateToResultPage: async function (sTerm, bAll) {
+            let sHash = `#WorkZoneSearchResult-display?searchTerm=${sTerm}&category=app`;
+            if (bAll) {
+                sHash = `#Action-search&/top=20&filter={"dataSource":{"type":"Category","id":"All","label":"All","labelPlural":"All"},"searchTerm":"${sTerm}",`
+                    + "\"rootCondition\":{\"type\":\"Complex\",\"operator\":\"And\",\"conditions\":[]}}";
+            }
+            const oNavigationService = await Container.getServiceAsync("Navigation");
+            await oNavigationService.navigate({
+                target: {
+                    shellHash: sHash
+                }
+            });
+        },
+
+        /**
+         * Refreshes the search action button in the shell bar based on the current search state.
+         * @private
+         */
+        _refreshSearchActionButton: function () {
+            const oActionButton = this._oSearchField.getAction()[0];
+            if (oActionButton) {
+                this._oSearchField.removeAction(oActionButton);
+            }
+
+            if (this._oSearchField.getValue() !== "" && this._oSearchField.getOpen()) {
+                this._oSearchField.addAction(new Button({
+                    text: {
+                        path: "searchResults>/resultCount",
+                        formatter: (iCount) => {
+                            return this._oI18nModel.getText("showAllSearchResults", [iCount || 0]);
+                        }
+                    },
+                    click: this._onSearch.bind(this),
+                    design: "Transparent"
+                }));
+            }
+        },
+
+        /**
+         * Resets the search state, clearing the search field and results.
+         * @param {boolean} [bResetValue] Whether to reset the search field value
+         * @private
+         */
+        _resetSearchState: async function (bResetValue) {
+            await ushellUtils.awaitTimeout(100);
+            if (this._oSearchField.getValue() !== "" && bResetValue) {
+                this._oSearchField.setValue("");
+            }
+            if (this._oSearchField.getOpen()) {
+                this._oSearchField.setOpen(false);
+            }
+            this._oResultModel.setProperty("/results", []);
+        },
+
+        /**
+         * Destroys the component, cleaning up resources.
+         * @private
+         */
+        exit: function () {
+            this._oSearchField.destroy();
+            this._aDoables.forEach((oDoable) => {
+                oDoable.off();
+            });
+            this._aDoables = [];
+            Component.prototype.exit.apply(this, arguments);
+        }
+    });
+});
+

package/src/main/js/sap/ushell/components/shell/SearchCEPNew/SearchProviders/FrequentActivityProvider.js

@@ -0,0 +1,84 @@
+// Copyright (c) 2009-2025 SAP SE, All Rights Reserved
+
+/**
+ * @fileOverview
+ * @version 1.139.0
+ */
+sap.ui.define([
+    "sap/base/Log",
+    "sap/ushell/Container"
+], (Log, Container) => {
+    "use strict";
+
+    /**
+     * @class
+     * @since 1.101.0
+     * @private
+     */
+    const FrequentActivityProvider = function () { };
+
+    /**
+     * returns the name of the search provider
+     *
+     * @returns {string} the name of the provider
+     *
+     * @since 1.101.0
+     * @private
+     */
+    FrequentActivityProvider.prototype.getName = function () {
+        return "Frequent Activity Provider";
+    };
+
+    /**
+     * provide the frequent activity of the user
+     *
+     * @param {string} sQuery the searchfield's input value
+     * @param {string} sGroupName the group name to filter activities
+     * @returns {Promise<object[]>} when resolved, contains the frequent activity array
+     *
+     * @since 1.101.0
+     * @private
+     */
+    FrequentActivityProvider.prototype.execSearch = function (sQuery, sGroupName) {
+        return Container.getServiceAsync("UserRecents").then((UserRecentsService) => {
+            return UserRecentsService.getFrequentActivity().then((aRecents) => {
+                let aFinalResult = [];
+                const oMapping = {
+                    frequentApplications: {
+                        Application: {
+                            icon: "sap-icon://SAP-icons-TNT/application"
+                        },
+                        "External Link": {
+                            icon: "sap-icon://internet-browser"
+                        }
+                    },
+                    frequentProducts: {
+                        Product: {
+                            icon: "sap-icon://product"
+                        }
+                    }
+                };
+
+                if (aRecents && Array.isArray(aRecents) && aRecents.length > 0) {
+
+                    aFinalResult = aRecents
+                        .filter((oItem) => {
+                            return oMapping[sGroupName].hasOwnProperty(oItem.appType);
+                        })
+                        .map((oItem) => {
+                            oItem.text = oItem.text || oItem.title;
+                            oItem.icon = oItem.icon || oMapping[sGroupName][oItem.appType].icon;
+                            return oItem;
+                        });
+                }
+
+                return aFinalResult;
+            }).catch((sError) => {
+                Log.error("Frequent Activity Provider failed", `error: ${sError}`, "sap.ushell.components.shell.SearchCEP.SearchProviders.FrequentActivityProvider::execSearch");
+                return [];
+            });
+        });
+    };
+
+    return new FrequentActivityProvider();
+}, false);

package/src/main/js/sap/ushell/components/shell/SearchCEPNew/SearchProviders/RecentSearchProvider.js

@@ -0,0 +1,63 @@
+// Copyright (c) 2009-2025 SAP SE, All Rights Reserved
+
+/**
+ * @fileOverview
+ * @version 1.139.0
+ */
+sap.ui.define([
+    "sap/base/Log",
+    "sap/ushell/Container"
+], (Log, Container) => {
+    "use strict";
+
+    /**
+     * @class
+     * @since 1.101.0
+     * @private
+     */
+    const RecentSearchProvider = function () { };
+
+    /**
+     * returns the name of the search provider
+     *
+     * @returns {string} the name of the provider
+     *
+     * @since 1.101.0
+     * @private
+     */
+    RecentSearchProvider.prototype.getName = function () {
+        return "Recent Search Terms Provider";
+    };
+
+    /**
+     * provide the recent searches
+     *
+     * @returns {Promise} when resolved, contains the search result array
+     *
+     * @since 1.101.0
+     * @private
+     */
+    RecentSearchProvider.prototype.execSearch = function () {
+        return Container.getServiceAsync("UserRecents").then((UserRecentsService) => {
+            return UserRecentsService.getRecentSearches().then((aRecents) => {
+                let aFinalResult = [];
+                if (Array.isArray(aRecents) && aRecents.length > 0) {
+                    aFinalResult = aRecents.map(
+                        (item) => {
+                            return {
+                                text: item.sTerm,
+                                icon: item.icon || "sap-icon://history"
+                            };
+                        });
+                }
+
+                return aFinalResult;
+            }, (sError) => {
+                Log.error("Recent Search Terms Provider failed", `error: ${sError}`, "sap.ushell.components.shell.SearchCEP.SearchProviders.RecentSearchProvider::execSearch");
+                return [];
+            });
+        });
+    };
+
+    return new RecentSearchProvider();
+}, false);