@sapui5/sap.ushell 1.127.1 → 1.128.0

package/src/main/js/sap/ushell/components/applicationIntegration/configuration/AppMeta.js

@@ -2,7 +2,7 @@
 
 /**
  * @fileOverview handle all the resources for the different applications.
- * @version 1.127.1
+ * @version 1.128.0
  */
 sap.ui.define([
     "sap/base/util/extend",

package/src/main/js/sap/ushell/components/applicationIntegration/relatedServices/RelatedServices.js

@@ -1,7 +1,7 @@
 // Copyright (c) 2009-2023 SAP SE, All Rights Reserved
 /**
  * @fileOverview handle all the services for the different applications.
- * @version 1.127.1
+ * @version 1.128.0
  */
 sap.ui.define([
     "sap/ui/core/EventBus",

package/src/main/js/sap/ushell/components/cepsearchresult/app/util/controls/Category.css

@@ -178,7 +178,7 @@
   border-radius: 50%;
   margin-top: 2rem;
   left: 2.2rem;
-  font-family: SAP-Icons;
+  font-family: SAP-icons;
   font-size: 8px;
   color: var(--sapUiTileBackground);
   font-weight: bold;
@@ -370,4 +370,4 @@
   100% {
     opacity: 1;
   }
-}
+}

package/src/main/js/sap/ushell/components/cepsearchresult/app/util/controls/Category.js

@@ -358,7 +358,7 @@ sap.ui.define(
       if (pFetch) {
         pFetch.then(function (oData) {
           this._iCurrentCount = oData.count || 0;
-          setTimeout(function() {
+          setTimeout(function () {
             this.setNoDataText(this.translate("NoData"), "NoData");
           }.bind(this), 100);
           this.fireFetchEvent("after", bVisible ? "data" : "count", oData);
@@ -368,8 +368,8 @@ sap.ui.define(
 
     Category.prototype.getMaxRowItemsAsync = function () {
       if (!this.getDomRef()) {
-        return new Promise(function(resolve) {
-          setTimeout(function() {
+        return new Promise(function (resolve) {
+          setTimeout(function () {
             resolve(this._getMaxRowItems());
           }.bind(this), 200);
         }.bind(this));
@@ -849,7 +849,7 @@ sap.ui.define(
         if (this._iResizeTimer) {
           clearTimeout(this._iResizeTimer);
         }
-        this._iResizeTimer = setTimeout(function() {
+        this._iResizeTimer = setTimeout(function () {
           this.search(this._sSearchTerm, this._iSkip, this._iTop);
         }.bind(this), 300);
       }

package/src/main/js/sap/ushell/components/cepsearchresult/app/util/controls/categories/Application.js

@@ -7,6 +7,8 @@ sap.ui.define(
     "sap/m/Text",
     "sap/m/Link",
     "sap/m/FlexBox",
+    "sap/m/library",
+    "sap/ui/base/Event",
     "sap/ushell/Container"
   ],
   function (
@@ -15,9 +17,14 @@ sap.ui.define(
     Text,
     Link,
     FlexBox,
+    mobileLibrary,
+    Event,
     Container
   ) {
     "use strict";
+
+    const LinkAccessibleRole = mobileLibrary.LinkAccessibleRole;
+
     var Application = Category.extend(
       "sap.ushell.components.cepsearchresult.app.util.controls.categories.Application", /** @lends sap.ushell.components.cepsearchresult.app.util.controls.categories.Application.prototype */ {
       renderer: Category.getMetadata().getRenderer()
@@ -116,7 +123,7 @@ sap.ui.define(
           // Ugly hack to force the avatar to rerender as the data binding does not work properly
           oItem.addDelegate({
             onAfterRendering: function () {
-              setTimeout(function() {
+              setTimeout(function () {
                 oAvatar.setSrc(oAvatar.getSrc());
                 oAvatar.invalidate();
               }, 5);
@@ -137,6 +144,12 @@ sap.ui.define(
       }.bind(this), iTime);
     };
 
+    Application.prototype.onsapenter = function (oEvent) {
+      // this custom event is needed for keyboard navigation
+      const oCustomEvent = new Event("customEventOnEnter", oEvent.srcControl, {});
+      this.itemNavigate(oCustomEvent);
+    };
+
     Application.prototype.itemNavigate = function (oEvent) {
       if (this.bIgnoreNextItemNavigation) {
         this.bIgnoreNextItemNavigation = false;
@@ -155,16 +168,32 @@ sap.ui.define(
         return;
       }
 
-      oItem._oViz.getDomRef().querySelector("a").click();
+      // replaced old anchor click, because it caused redirect to page with config lean
+      const sTarget = oItem._oViz.mProperties.targetURL;
+      Container.getServiceAsync("Navigation").then(
+        (oService) => {
+          oService.navigate({
+            target: { shellHash: sTarget }
+          });
+        }
+      );
     };
 
     Application.prototype.getItemObjectIdentifier = function () {
+      const oLink = new Link({
+        text: "{data>title}",
+        press: this.itemNavigate.bind(this),
+        accessibleRole: LinkAccessibleRole.Button
+       }).addStyleClass("appTitleText");
+      // removes the href from List item
+      oLink.setHref();
+
       return new FlexBox({
         direction: "Column",
         items: [
           new FlexBox({
             items: [
-              new Link({ text: "{data>title}", press: this.itemNavigate.bind(this) }).addStyleClass("appTitleText"),
+              oLink,
               new Text({ text: "–", visible: "{= !!${data>title} && !!${data>description}}"}).addStyleClass("appTitleSeparator"),
               new Text({ text: "{data>description}" }).addStyleClass("appDescriptionText")
             ]

package/src/main/js/sap/ushell/components/container/ApplicationContainer.js

@@ -2,7 +2,7 @@
 
 /**
  * @fileOverview The UI integration's SAPUI5 control which supports application embedding.
- * @version 1.127.1
+ * @version 1.128.0
  */
 sap.ui.define([
     "sap/base/Log",

package/src/main/js/sap/ushell/components/contentFinder/CatalogService.js

@@ -0,0 +1,193 @@
+// Copyright (c) 2009-2023 SAP SE, All Rights Reserved
+
+/**
+ * @fileOverview This module communicates with the content API graphql service to retrieve catalogs and visualization data for catalogs.
+ * @version 1.128.0
+ */
+sap.ui.define([
+    "sap/base/i18n/Localization",
+    "sap/ushell/utils/HttpClient",
+    "sap/ushell/Config"
+], function (
+    Localization,
+    HttpClient,
+    Config
+) {
+    "use strict";
+
+    /**
+     * @alias sap.ushell.components.contentFinder.CatalogService
+     * @class
+     * @classdesc Service for loading Catalogs.
+     *
+     * @since 1.121.0
+     * @private
+     */
+    const Catalog = function () {
+        this.httpClient = new HttpClient();
+        this._sBaseUrl = Config.last("/core/workPages/contentApiUrl");
+
+        const oUrlParams = new URLSearchParams(window.location.search);
+        this._sSiteId = oUrlParams.get("siteId") || Config.last("/core/site/siteId");
+    };
+
+    /**
+     *
+     * @returns {Promise<Array<object>>} List of Catalogs
+     */
+    Catalog.prototype.getCatalogs = function () {
+        /**
+         * The backend implements a maximum page size. Since all catalogs shall be requested, we
+         * query the first page incl. the total count. With the result length and the total count
+         * we can calculate the other pages and request them all in parallel but only after the first
+         * page was returned.
+         */
+        const pFirstRequest = this._getCatalogs();
+        const aRequests = [pFirstRequest];
+        let fnResolve, fnReject;
+
+        const pReturn = new Promise((resolve, reject) => {
+            fnResolve = resolve;
+            fnReject = reject;
+        });
+
+        pFirstRequest.then((oData) => {
+            let iSkip = oData.catalogs.length;
+            const iPageSize = iSkip;
+            const iLength = oData.totalCount;
+
+            while (iSkip < iLength) {
+                aRequests.push(this._getCatalogs(iSkip, iPageSize));
+                iSkip += iPageSize;
+            }
+
+            Promise.all(aRequests).then((aResponses) => {
+                const aCatalogs = aResponses.reduce((aAccumulator, oItem) => {
+                    return aAccumulator.concat(oItem.catalogs);
+                }, []);
+                fnResolve({catalogs: aCatalogs, totalCount: aResponses[0].totalCount});
+
+            });
+        }).catch((sError) => {
+            fnReject(sError);
+        });
+
+        return pReturn;
+    };
+
+    Catalog.prototype._getCatalogs = function (iSkip, iTop, mParameters) {
+        let sQuery = `
+        getCatalogs ($queryInput: QueryCatalogsInput!){
+            catalogs(queryInput: $queryInput) {
+                totalCount,
+                nodes {
+                    id,
+                    descriptor { value }
+                }
+            }
+        }`;
+        // Replace line breaks and spaces
+        sQuery = sQuery
+            .replace(/\n/g, "")
+            .replace(/ /g, "");
+
+        sQuery = `query ${sQuery}`;
+
+        const oParameters = {...mParameters};
+        oParameters.skip = iSkip || 0;
+        if (iTop) {
+            oParameters.top = iTop;
+        }
+
+        const oVariables = {
+            queryInput: oParameters
+        };
+
+        return this._doRequest(sQuery, JSON.stringify(oVariables)).then((oCatalogData) => {
+            const aCatalogs = [];
+            if (oCatalogData.data.catalogs) {
+                oCatalogData.data.catalogs.nodes.forEach((item) => {
+                    if (item.descriptor.value) {
+                        aCatalogs.push({id: item.id, title: item.descriptor.value.title});
+                    }
+
+                });
+            }
+            return {
+                catalogs: aCatalogs,
+                totalCount: oCatalogData.data.catalogs.totalCount || 0
+            };
+        });
+    };
+
+    Catalog.prototype.loadVisualizations = function (sCatalogId, mParameters) {
+        let sQuery = `
+        getCatalog {
+            catalog(catalogId: "${sCatalogId}") {
+                id,
+                descriptor { value },
+                visualizations(queryInput: {}) {
+                    totalCount,
+                    nodes{
+                        id,
+                        type,
+                        descriptor {
+                            value,
+                            schemaVersion
+                        },
+                        descriptorResources {
+                            baseUrl,
+                            descriptorPath
+                        },
+                        indicatorDataSource {
+                            url,
+                            refreshInterval
+                        },
+                        targetAppIntent {
+                            semanticObject,
+                            action,
+                            businessAppId
+                        }
+                    }
+                }
+            }
+        }`;
+
+        // Replace line breaks and spaces
+        sQuery = sQuery
+            .replace(/\n/g, "")
+            .replace(/ /g, "");
+
+        sQuery = `query ${sQuery}`;
+
+        const oVariables = {
+            filterQuery: mParameters
+        };
+
+        return this._doRequest(sQuery, JSON.stringify(oVariables)).then((oVizData) => {
+            return {
+            visualizations: oVizData.data.catalog.visualizations || [],
+            totalCount: oVizData.data.catalog.visualizations.totalCount || 0
+            };
+        });
+    };
+
+    Catalog.prototype._doRequest = function (sQuery, sVariables) {
+        let sUrl = `${this._sBaseUrl}?query=${sQuery}`;
+        if (sVariables) { sUrl += `&variables=${sVariables}`; }
+        return this.httpClient.get(sUrl, {
+            headers: {
+                "Content-Type": "application/json",
+                Accept: "application/json",
+                "Accept-Language": Localization.getLanguageTag().toString()
+            }
+        }).then(function (oResponse) {
+            if (oResponse.status < 200 || oResponse.status >= 300) {
+                return Promise.reject(`HTTP request failed with status: ${oResponse.status} - ${oResponse.statusText}`);
+            }
+            return JSON.parse(oResponse.responseText || "{}");
+        });
+    };
+
+    return Catalog;
+}, /*export=*/ true);

package/src/main/js/sap/ushell/components/contentFinder/Component.js

@@ -2,7 +2,7 @@
 /**
  * @fileOverview ContentFinder Component
  *
- * @version 1.127.1
+ * @version 1.128.0
  */
 
 sap.ui.define([
@@ -12,8 +12,9 @@ sap.ui.define([
     "sap/ui/core/UIComponent",
     "sap/ushell/components/contentFinder/model/GraphQLModel",
     "sap/ui/model/json/JSONModel",
-    "sap/ushell/adapters/cdm/v3/utilsCdm"
-], function (Log, deepExtend, ObjectPath, UIComponent, GraphQLModel, JSONModel, utilsCdm) {
+    "sap/ushell/adapters/cdm/v3/utilsCdm",
+    "sap/ushell/Config"
+], function (Log, deepExtend, ObjectPath, UIComponent, GraphQLModel, JSONModel, utilsCdm, Config) {
     "use strict";
 
     /**
@@ -24,14 +25,6 @@ sap.ui.define([
      * @property {string[]} visualizationIds The list of visualization IDs to be added.
      */
 
-    /**
-     * Event to query visualizations with a set of types, searchTerm and pagination.
-     *
-     * @event sap.ushell.components.contentFinder.Component#visualizationFilterApplied
-     * @type {object}
-     * @property {{pagination: {skip: int, top: int}}} filter data Filter data object containing pagination and filter information.
-     */
-
     /**
      * Event if a widget (type) without target was selected in the widget gallery.
      *
@@ -61,7 +54,9 @@ sap.ui.define([
             visualizations: {
                 tiles: []
             }
-        }
+        },
+
+        personalizationEnabled: Config.last("/core/shell/enablePersonalization")
     };
 
     /**
@@ -74,11 +69,15 @@ sap.ui.define([
 
         // The current/active navigation target within the ContentFinderDialog
         activeNavigationTarget: oNavigationTargets.widgetGallery,
+        selectedCategoryId: undefined,
+        selectedCategoryTitle: undefined,
 
         // A content finder in restricted mode shows no widget Gallery and starts directly with the appSearch.
         // Additionally, no "Back" button is rendered, as the end user cannot navigate to the WidgetGallery.
         restrictedMode: false,
 
+        personalizationEnabled: Config.last("/core/shell/enablePersonalization"),
+
         widgetGallery: {
             widgetGroups: []
         },
@@ -118,7 +117,49 @@ sap.ui.define([
         metadata: {
             manifest: "json",
             library: "sap.ushell",
-            interfaces: ["sap.ui.core.IAsyncContentCreation"]
+            interfaces: ["sap.ui.core.IAsyncContentCreation"],
+            events: {
+                /**
+                 * Fires when additional visualizations must be requested:
+                 * - Search term or filters changed
+                 * - End of the page is reached (growing)
+                 * - The selection in the category tree changed
+                 *
+                 * In the event handler new data should be provided by the embedding component. The
+                 * Content Finder is set to busy until <code>setVisualizationData</code> is called.
+                 *
+                 * @type {object}
+                 * @since 1.115.0
+                 * @private
+                 */
+                visualizationFilterApplied: {
+                    allowPreventDefault: true,
+                parameters: {
+                    /**
+                     * A string array of visualization types that shall be requested. E.g.:
+                     * - sap.ushell.StaticAppLauncher
+                     * - sap.ushell.DynamicAppLauncher
+                     */
+                    types: {type: "string[]"},
+                    /**
+                     * The search term that was entered by the user for the visualization search
+                     */
+                    searchTerm: {type: "string"},
+                        /**
+                         * Current pagination information of the visualizations GridList
+                         */
+                        pagination: {type: {
+                            skip: "integer",
+                            top: "integer"
+                        }},
+                        filter: {type: "any"},
+                        /**
+                         * The currently selected category ID if any
+                         */
+                        categoryId: {type: "string"}
+                    }
+                }
+            }
         },
 
         /**
@@ -196,8 +237,19 @@ sap.ui.define([
         },
 
         /**
-         * Sets the menu tree data for the Content Finder model.
-         * @param {object} aCategoryTree The category tree object.
+         * Sets the category tree data for the Content Finder model.
+         * The category tree does not support pagination. All tree data must be set at once.
+         *
+         * @typedef {object} category The category tree object.
+         * @property {string} id ID of the category. This will be passed as event parameter when a category item is pressed
+         * @property {string} title Title that is displayed in the category tree
+         * @property {string} description Description that is displayed in the category tree
+         * @property {string} contentProviderId ID of the content provider
+         * @property {string} contentProviderLabel Label of the content provider
+         * @property {boolean} inactive Sets the <code>sap.m.TreeItemBase[type]</code> to Inactive. No events will be passed for this item.
+         * @property {category[]} nodes Next hierarchy level of categories
+         *
+         * @param {category[]} aCategoryTree A tree of category objects
          * @experimental
          * @private
          */
@@ -211,10 +263,11 @@ sap.ui.define([
          * @since 1.115.0
          * @param {int} iSkip Number of entries already displayed.
          * @param {string} [sSearchTerm] The search term.
+         * @param {string} [sCategoryId] The category ID resulting from the category tree selection
          *
          * @private
          */
-        queryVisualizations: function (iSkip, sSearchTerm) {
+        queryVisualizations: function (iSkip, sSearchTerm, sCategoryId) {
             var oModel = this.getModel();
             var sActiveNavigationTarget = oModel.getProperty("/activeNavigationTarget");
             var aTypes = oNavigationTargetTypeMapping[sActiveNavigationTarget] || [];
@@ -229,7 +282,8 @@ sap.ui.define([
                         top: oModel.getProperty("/appSearch/growingThreshold")
                     },
                     types: aTypes,
-                    search: sSearchTerm || null
+                    search: sSearchTerm || null,
+                    categoryId: sCategoryId || null
                 });
             }
         },
@@ -405,7 +459,6 @@ sap.ui.define([
             return this;
         },
 
-
         /**
          * Resets the AppSearch, but keeps originally passed visualizations in the model.
          *

package/src/main/js/sap/ushell/components/contentFinder/controller/AppSearch.controller.js

@@ -2,20 +2,26 @@
 
 /**
  * @file AppSearch controller for AppSearch view
- * @version 1.127.1
+ * @version 1.128.0
  */
 sap.ui.define([
     "./ContentFinderDialog.controller",
     "../model/formatter",
     "sap/base/Log",
     "sap/ushell/utils/WindowUtils",
-    "sap/ui/thirdparty/hasher"
+    "sap/ui/thirdparty/hasher",
+    "sap/m/ListType",
+    "sap/ui/model/Filter",
+    "sap/ui/model/FilterOperator"
 ], function (
     ContentFinderController,
     formatter,
     Log,
     WindowUtils,
-    hasher
+    hasher,
+    ListType,
+    Filter,
+    FilterOperator
 ) {
     "use strict";
 
@@ -48,9 +54,10 @@ sap.ui.define([
          * @private
          */
         onInit: function () {
-            this.oModel = this.getOwnerComponent().getModel();
-            this.oSelectionModel = this.getOwnerComponent().getModel("Selection");
-            this.oResourceBundle = this.getOwnerComponent().getModel("i18n").getResourceBundle();
+            const oComponent = this.getOwnerComponent();
+            this.oModel = oComponent.getModel();
+            this.oSelectionModel = oComponent.getModel("Selection");
+            this.oResourceBundle = oComponent.getModel("i18n").getResourceBundle();
         },
 
         /**
@@ -96,14 +103,22 @@ sap.ui.define([
          * @param {sap.base.Event} oEvent The 'search' event.
          */
         onSearch: function (oEvent) {
-            var sQuery = oEvent.getParameter("query") || "";
+            const sQuery = oEvent.getParameter("query") || "";
             this.sCurrentSearchTerm = sQuery;
             this.emptyVisualizations();
             this.toggleSelectionView(false);
-            this.getOwnerComponent().queryVisualizations(0, sQuery);
+
+            const sCategoryId = this.oModel.getProperty("/selectedCategoryId");
+            this.getOwnerComponent().queryVisualizations(0, sQuery, sCategoryId);
             this.oModel.setProperty("/appSearch/searchTerm", oEvent.getParameter("query"));
         },
 
+        onCatalogSearch: async function (oEvent) {
+            const sQuery = oEvent.getParameter("newValue") || "";
+            const oFilter = new Filter("title", FilterOperator.Contains, sQuery);
+            this.byId("CategoryTreeFragment--CategoryTree").getBinding().filter(oFilter);
+        },
+
         /**
          * Formatter for the selected state of an AppBox. Returns true if the given vizId is found in the array of visualizations.
          *
@@ -161,8 +176,9 @@ sap.ui.define([
          */
         onAppBoxSelectedAndClose: function (oEvent) {
             const oVizData = oEvent.getParameter("listItem").getBindingContext().getObject();
-            this.getOwnerComponent().addVisualizations([oVizData]);
-            this.getOwnerComponent().getRootControl().byId("contentFinderDialog").close();
+            const oComponent = this.getOwnerComponent();
+            oComponent.addVisualizations([oVizData]);
+            oComponent.getRootControl().byId("contentFinderDialog").close();
         },
 
         /**
@@ -174,9 +190,10 @@ sap.ui.define([
          */
         onUpdateStarted: function (oEvent) {
             if (oEvent.getParameter("reason") === "Growing") {
-                var sSearchTerm = this.oModel.getProperty("/appSearch/searchTerm");
-                var iSkip = oEvent.getParameter("actual");
-                this.getOwnerComponent().queryVisualizations(iSkip, sSearchTerm);
+                const sSearchTerm = this.oModel.getProperty("/appSearch/searchTerm");
+                const iSkip = oEvent.getParameter("actual");
+                const sCategoryId = this.oModel.getProperty("/selectedCategoryId");
+                this.getOwnerComponent().queryVisualizations(iSkip, sSearchTerm, sCategoryId);
             }
         },
 
@@ -224,11 +241,38 @@ sap.ui.define([
             return false;
         },
 
-        onTreeItemPressed: function (oEvent) {
-            /**
-             * @TODO: implement
-             * Get the category id via: oEvent.getParameter("listItem").getBindingContext().getProperty("id")
-             */
+        onCategoryTreeItemPressed: function (oEvent) {
+            const oItem = oEvent.getParameter("listItem");
+            if (oItem.getType() !== ListType.Inactive) {
+                this.resetAppSearch();
+                const sCategoryId = oItem.getBindingContext().getProperty("id");
+                const sCategoryTitle = oItem.getBindingContext().getProperty("title");
+                this.oModel.setProperty("/selectedCategoryId", sCategoryId);
+                this.oModel.setProperty("/selectedCategoryTitle", sCategoryTitle);
+                const sSearchTerm = "";
+                this.getOwnerComponent().queryVisualizations(0, sSearchTerm, sCategoryId);
+            }
+        },
+
+        onCategoryTreeUpdateFinished: function (oEvent) {
+            const oTree = oEvent.getSource();
+            /** The <code>checkUpdate</code> implementation of the <code>ClientTreeBinding</code>
+             * does not check for actual changes but always fires an update whenever a model property changes.
+             * Hence we check if there is already a selected item and only set an initial selection if there is none.
+            */
+            if (!oTree.getSelectedItem()) {
+                const aItems = oTree.getItems();
+                const oFirstItem = aItems[0];
+                if (oFirstItem) {
+                    oTree.setSelectedItem(oFirstItem);
+                    // set the initial selectedCategory. This is expected by visualizationFilterApplied event
+                    // handlers and used to show the title for the visualizations GridList
+                    const oData = oFirstItem.getBindingContext().getObject() || {};
+                    const oComponent = this.getOwnerComponent();
+                    oComponent.getModel().setProperty("/selectedCategoryId", oData.id);
+                    oComponent.getModel().setProperty("/selectedCategoryTitle", oData.title);
+                }
+            }
         },
 
         onLaunchApplication: function (oEvent) {

package/src/main/js/sap/ushell/components/contentFinder/controller/ContentFinderDialog.controller.js

@@ -2,7 +2,7 @@
 
 /**
  * @file Controller for ContentFinderDialog root view
- * @version 1.127.1
+ * @version 1.128.0
  */
 sap.ui.define([
     "../model/formatter",

package/src/main/js/sap/ushell/components/contentFinder/controller/WidgetGallery.controller.js

@@ -2,7 +2,7 @@
 
 /**
  * @file Controller for WidgetGallery view
- * @version 1.127.1
+ * @version 1.128.0
  */
 sap.ui.define([
     "./ContentFinderDialog.controller"

package/src/main/js/sap/ushell/components/contentFinder/manifest.json

@@ -3,7 +3,7 @@
     "sap.app": {
         "id": "sap.ushell.components.contentFinder",
         "applicationVersion": {
-            "version": "1.127.1"
+            "version": "1.128.0"
         },
         "i18n": "./resources/resources.properties",
         "ach": "CA-FLP-FE-UI",