feat(preview-middleware): introduce enhanced flp homepage

.changeset/modern-seals-ring.md

@@ -0,0 +1,7 @@
+---
+'@sap-ux/preview-middleware': minor
+'@sap-ux-private/preview-middleware-client': patch
+---
+
+feat: introduce enhanced flp homepage
+  - controlled via boolean property `flp.enhancedHomePage`, which is false by default

packages/preview-middleware-client/package.json

@@ -18,7 +18,8 @@
         "format": "prettier --write '**/*.{js,json,ts,yaml,yml}' --ignore-path ../../.prettierignore",
         "lint": "eslint . --ext .ts",
         "lint:fix": "eslint . --ext .ts --fix",
-        "test": "jest --ci --forceExit --detectOpenHandles --colors"
+        "test": "jest --ci --forceExit --detectOpenHandles --colors",
+        "test-u": "jest --ci --forceExit --detectOpenHandles --colors -u"
     },
     "files": [
         "dist"

packages/preview-middleware-client/src/flp/homepage/Component.ts

@@ -0,0 +1,10 @@
+import BaseComponent from 'sap/ui/core/UIComponent';
+
+/**
+ * @namespace open.ux.preview.client.flp.homepage
+ */
+export default class Component extends BaseComponent {
+    public static readonly metadata = {
+        manifest: 'json'
+    };
+}

packages/preview-middleware-client/src/flp/homepage/css/style.css

@@ -0,0 +1,3 @@
+.homeNewsContainer .sapCuxBaseWrapper > * {
+    width: 100%;
+}

packages/preview-middleware-client/src/flp/homepage/manifest.json

@@ -0,0 +1,41 @@
+{
+    "sap.app": {
+        "id": "open.ux.preview.client.flp.homepage",
+        "type": "application",
+        "title": "FLP HomePage"
+    },
+    "sap.ui": {
+        "technology": "UI5",
+        "deviceTypes": {
+            "desktop": true,
+            "tablet": true,
+            "phone": true
+        }
+    },
+    "sap.ui5": {
+        "rootView": {
+            "viewName": "open.ux.preview.client.flp.homepage.view.MyHome",
+            "type": "XML",
+            "async": true,
+            "id": "myhome"
+        },
+        "dependencies": {
+            "minUI5Version": "1.123.0",
+            "libs": {
+                "sap.ui.core": {},
+                "sap.cux.home": {}
+            }
+        },
+        "contentDensities": {
+            "compact": true,
+            "cozy": true
+        },
+        "resources": {
+            "css": [
+                {
+                    "uri": "css/style.css"
+                }
+            ]
+        }
+    }
+}

packages/preview-middleware-client/src/flp/homepage/view/MyHome.view.xml

@@ -0,0 +1,24 @@
+<mvc:View
+    xmlns="sap.cux.home"
+    xmlns:m="sap.m"
+    xmlns:mvc="sap.ui.core.mvc"
+    displayBlock="true"
+    class="sapUShellFullHeight"
+>
+    <m:Page
+        id="page"
+        showHeader="false"
+        class="sapUiBaseLayout sapUiResponsiveContentPadding sapUiLayoutPadding sapCuxBaseLayout"
+    >
+        <NewsAndPagesContainer id="newsContainer" class="homeNewsContainer">
+            <NewsPanel
+                id="news"
+                url="https://sapui5untested.int.sap.eu2.hana.ondemand.com/databinding/proxy/https/news.sap.com/feed"
+            />
+        </NewsAndPagesContainer>
+
+        <AppsContainer id="appsContainer">
+            <FavAppPanel id="favoriteApps" />
+        </AppsContainer>
+    </m:Page>
+</mvc:View>

packages/preview-middleware-client/src/flp/init.ts

@@ -8,6 +8,7 @@ import ResourceBundle from 'sap/base/i18n/ResourceBundle';
 import AppState from 'sap/ushell/services/AppState';
 import { getManifestAppdescr } from '../adp/api-handler';
 import { getError } from '../utils/error';
+import initCdm from './initCdm';
 import initConnectors from './initConnectors';
 import { getUi5Version, isLowerThanMinimalUi5Version, Ui5VersionInfo } from '../utils/version';
 import { CommunicationService } from '../cpe/communication-service';
@@ -257,16 +258,19 @@ export function setI18nTitle(resourceBundle: ResourceBundle, i18nKey = 'appTitle
  * @param params.appUrls JSON containing a string array of application urls
  * @param params.flex JSON containing the flex configuration
  * @param params.customInit path to the custom init module to be called
+ * @param params.enhancedHomePage boolean indicating if enhanced homepage is enabled
  * @returns promise
  */
 export async function init({
     appUrls,
     flex,
-    customInit
+    customInit,
+    enhancedHomePage
 }: {
     appUrls?: string | null;
     flex?: string | null;
     customInit?: string | null;
+    enhancedHomePage?: boolean | null;
 }): Promise<void> {
     const urlParams = new URLSearchParams(window.location.search);
     const container = sap?.ushell?.Container ??
@@ -340,6 +344,10 @@ export async function init({
     setI18nTitle(resourceBundle);
     registerSAPFonts();
 
+    if (enhancedHomePage) {
+        await initCdm(container);
+    }
+
     const renderer =
         (ui5VersionInfo.major < 2 && !ui5VersionInfo.label?.includes('legacy-free'))
             ? await container.createRenderer(undefined, true)
@@ -353,7 +361,8 @@ if (bootstrapConfig) {
     init({
         appUrls: bootstrapConfig.getAttribute('data-open-ux-preview-libs-manifests'),
         flex: bootstrapConfig.getAttribute('data-open-ux-preview-flex-settings'),
-        customInit: bootstrapConfig.getAttribute('data-open-ux-preview-customInit')
+        customInit: bootstrapConfig.getAttribute('data-open-ux-preview-customInit'),
+        enhancedHomePage: !!bootstrapConfig.getAttribute('data-open-ux-preview-enhanced-homepage')
     }).catch((e) => {
         const error = getError(e);
         Log.error('Sandbox initialization failed: ' + error.message);

packages/preview-middleware-client/src/flp/initCdm.ts

@@ -0,0 +1,118 @@
+import { Window } from 'types/global';
+
+/**
+ * Initializes the CDM (Common Data Model) configuration for the SAP Fiori Launchpad.
+ *
+ * @param {sap.ushell.Container} container - The SAP Fiori Launchpad container.
+ * @returns {Promise<void>} A promise that resolves when the initialization is complete.
+ */
+export default async function initCdm(container: typeof sap.ushell.Container): Promise<void> {
+    (window as unknown as Window)['sap-ushell-config'] = {
+        defaultRenderer: 'fiori2',
+        renderers: {
+            fiori2: {
+                componentData: {
+                    config: {
+                        enableSearch: false,
+                        enableRecentActivity: true,
+                        rootIntent: 'Shell-home'
+                    }
+                }
+            }
+        },
+        ushell: {
+            customPreload: {
+                enabled: false
+            },
+            spaces: {
+                enabled: true,
+                myHome: {
+                    enabled: true
+                }
+            },
+            homeApp: {
+                component: {
+                    name: 'open.ux.preview.client.flp.homepage',
+                    url: '/preview/client/flp/homepage'
+                }
+            }
+        },
+        services: {
+            Container: {
+                adapter: {
+                    config: {
+                        userProfile: {
+                            metadata: {
+                                editablePropterties: [
+                                    'accessibility',
+                                    'contentDensity',
+                                    'theme'
+                                ]
+                            },
+                            defaults: {
+                                email: '[email protected]',
+                                firstName: 'John',
+                                lastName: 'Doe',
+                                fullName: 'John Doe',
+                                id: 'DOEJ'
+                            }
+                        }
+                    }
+                }
+            },
+            CommonDataModel: {
+                adapter: {
+                    config: {
+                        ignoreSiteDataPersonalization: true,
+                        siteDataUrl: '/cdm.json'
+                    }
+                }
+            },
+            Personalization: {
+                adapter: {
+                    module: 'sap.ushell.adapters.local.PersonalizationAdapter',
+                    config: {
+                        storageType: 'MEMORY'
+                    }
+                }
+            },
+            PersonalizationV2: {
+                adapter: {
+                    module: 'sap.ushell.adapters.local.PersonalizationAdapter',
+                    config: {
+                        storageType: 'MEMORY'
+                    }
+                }
+            },
+            AppState: {
+                adapter: {
+                    module: 'sap.ushell.adapters.local.AppStateAdapter'
+                },
+                config: {
+                    transient: true
+                }
+            },
+            NavTargetResolutionInternal: {
+                config: {
+                    allowTestUrlComponentConfig: false,
+                    enableClientSideTargetResolution: true
+                },
+                adapter: {
+                    module: 'sap.ushell.adapters.local.NavTargetResolutionInternalAdapter'
+                }
+            },
+            UserInfo: {
+                adapter: {
+                    module: 'sap.ushell.adapters.local.UserInfoAdapter'
+                }
+            },
+            FlpLaunchPage: {
+                adapter: {
+                    module: 'sap.ushell.adapters.cdm.v3.FlpLaunchPageAdapter'
+                }
+            }
+        }
+    };
+
+    await container.init('cdm');
+}

packages/preview-middleware-client/src/utils/version.ts

@@ -48,8 +48,8 @@ function checkVersionInfo(versionInfo: Ui5VersionInfo): void {
 export async function getUi5Version(library: string = 'sap.ui.core'): Promise<Ui5VersionInfo> {
     let version = ((await VersionInfo.load({ library })) as SingleVersionInfo)?.version;
     if (!version) {
-        Log.error('Could not get UI5 version of application. Using 1.121.0 as fallback.');
-        version = '1.121.0';
+        Log.error('Could not get UI5 version of application. Using 1.130.0 as fallback.');
+        version = '1.130.0';
     }
     const [major, minor, patch] = version.split('.').map((versionPart) => parseInt(versionPart, 10));
     const label = version.split(/-(.*)/s)?.[1];

packages/preview-middleware-client/test/__mock__/window.ts

@@ -28,7 +28,8 @@ export const sapMock = {
             createRenderer: jest.fn().mockReturnValue({ placeAt: jest.fn() }),
             createRendererInternal: jest.fn().mockReturnValue({ placeAt: jest.fn() }),
             attachRendererCreatedEvent: jest.fn(),
-            getServiceAsync: jest.fn()
+            getServiceAsync: jest.fn(),
+            init: jest.fn()
         }
     }
 };