Preview support for UI5 2.x

.changeset/preview-2.0.md

@@ -0,0 +1,6 @@
+---
+"@sap-ux-private/preview-middleware-client": patch
+"@sap-ux/preview-middleware": patch
+---
+
+Preview support for UI5 2.x 

packages/preview-middleware-client/src/flp/bootstrap.js

@@ -0,0 +1,38 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment,
+                  @typescript-eslint/no-unsafe-member-access,
+                  @typescript-eslint/no-unsafe-assignment,
+                  @typescript-eslint/no-unsafe-argument,
+                  no-console */
+
+/**
+ * Calculates the script content for accessing the right sap/ushell/bootstrap sandbox.
+ * @param fnCallback {Function} The callback function to be executed after the bootstrap is loaded.
+ */
+async function ushellBootstrap(fnCallback) {
+    let src = '/test-resources/sap/ushell/bootstrap/sandbox.js';
+    try {
+        const response = await fetch('/resources/sap-ui-version.json');
+        const json = await response.json();
+        const version = json?.version;
+        const major = version ? parseInt(version.split('.')[0], 10) : 2;
+        if (major >= 2) {
+            src = '/resources/sap/ushell/bootstrap/sandbox2.js';
+        }
+    } catch (error) {
+        console.warn('Failed to fetch sap-ui-version.json. Assuming it is a 1.x version.');
+    }
+
+    // eslint-disable-next-line fiori-custom/sap-no-dom-access,fiori-custom/sap-browser-api-warning
+    const shellBootstrap = document.getElementById('sap-ushell-bootstrap');
+    if (shellBootstrap) {
+        shellBootstrap.onload = () => {
+            window['sap-ui-config']['xx-bootTask'](fnCallback);
+        };
+        shellBootstrap.setAttribute('src', src);
+    }
+}
+
+// eslint-disable-next-line fiori-custom/sap-no-global-define
+window['sap-ui-config'] = {
+    'xx-bootTask': ushellBootstrap
+};

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

@@ -7,6 +7,9 @@ import IconPool from 'sap/ui/core/IconPool';
 import ResourceBundle from 'sap/base/i18n/ResourceBundle';
 import AppState from 'sap/ushell/services/AppState';
 import { getManifestAppdescr } from '../adp/api-handler';
+import VersionInfo from 'sap/ui/VersionInfo';
+import { getError } from '../cpe/error-utils';
+import initConnectors from './initConnectors';
 
 /**
  * SAPUI5 delivered namespaces from https://ui5.sap.com/#/api/sap
@@ -264,16 +267,16 @@ export async function init({
     customInit?: string | null;
 }): Promise<void> {
     const urlParams = new URLSearchParams(window.location.search);
-    const container = sap?.ushell?.Container ?? (sap.ui.require('sap/ushell/Container') as typeof sap.ushell.Container);
+    const container = sap?.ushell?.Container ?? sap.ui.require('sap/ushell/Container');
     let scenario: string = '';
+    const { version } = (await VersionInfo.load()) as { version: string };
     // Register RTA if configured
     if (flex) {
         const flexSettings = JSON.parse(flex) as FlexSettings;
         scenario = flexSettings.scenario;
         container.attachRendererCreatedEvent(async function () {
             const lifecycleService = await container.getServiceAsync<AppLifeCycle>('AppLifeCycle');
             lifecycleService.attachAppLoaded((event) => {
-                const version = sap.ui.version;
                 const minor = parseInt(version.split('.')[1], 10);
                 const view = event.getParameter('componentInstance');
                 const flexSettings = JSON.parse(flex) as FlexSettings;
@@ -317,6 +320,9 @@ export async function init({
         await registerComponentDependencyPaths(JSON.parse(appUrls), urlParams);
     }
 
+    // Load rta connector
+    await initConnectors();
+
     // Load custom initialization module
     if (customInit) {
         sap.ui.require([customInit]);
@@ -326,15 +332,22 @@ export async function init({
     const resourceBundle = await loadI18nResourceBundle(scenario as Scenario);
     setI18nTitle(resourceBundle);
     registerSAPFonts();
-    const renderer = await container.createRenderer(undefined, true);
+    const major = version ? parseInt(version.split('.')[0], 10) : 2;
+
+    const renderer =
+        major < 2
+            ? await container.createRenderer(undefined, true)
+            : await container.createRendererInternal(undefined, true);
     renderer.placeAt('content');
 }
-
 const bootstrapConfig = document.getElementById('sap-ui-bootstrap');
 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')
-    }).catch(() => Log.error('Sandbox initialization failed.'));
+    }).catch((e) => {
+        const error = getError(e);
+        Log.error('Sandbox initialization failed: ' + error.message);
+    });
 }

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

@@ -1,3 +1,5 @@
+import VersionInfo from 'sap/ui/VersionInfo';
+
 /**
  * Initializes UI5 connectors based on the current UI5 version.
  *
@@ -7,13 +9,14 @@
  *
  * @example
  * intiConnectors(); // Simply call the function without any arguments.
- * @returns {void}
  */
-export function initConnectors(): void {
-    const version = sap.ui.version;
-    const minor = parseInt(version.split('.')[1], 10);
+export default async function initConnectors(): Promise<void> {
+    const { version } = (await VersionInfo.load()) as { version: string };
+    const versionArray = version ? version.split('.') : ['2', '99'];
+    const minor = parseInt(versionArray[1], 10);
+    const major = parseInt(versionArray[0], 10);
 
-    if (minor < 72) {
+    if (major === 1 && minor < 72) {
         sap.ui.require(['open/ux/preview/client/flp/enableFakeConnector'], function (enableFakeConnector: () => void) {
             enableFakeConnector();
         });
@@ -26,5 +29,3 @@ export function initConnectors(): void {
         );
     }
 }
-
-initConnectors();

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

@@ -26,6 +26,7 @@ export const sapMock = {
     ushell: {
         Container: {
             createRenderer: jest.fn().mockReturnValue({ placeAt: jest.fn() }),
+            createRendererInternal: jest.fn().mockReturnValue({ placeAt: jest.fn() }),
             attachRendererCreatedEvent: jest.fn(),
             getServiceAsync: jest.fn()
         }

packages/preview-middleware-client/test/unit/flp/bootstrap.test.ts

@@ -0,0 +1,46 @@
+import { documentMock } from 'mock/window';
+import '../../../src/flp/bootstrap';
+
+describe('flp/ushellBootstrap', () => {
+    const htmlElement = {
+        onload: jest.fn(),
+        setAttribute: jest.fn()
+    };
+    documentMock.getElementById.mockReturnValue(htmlElement);
+    const fetchMock = jest.spyOn(global, 'fetch');
+
+    const ushellBootstrap = window['sap-ui-config']['xx-bootTask'];
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    test('xx-boottask defined', () => {
+        expect(ushellBootstrap).toBeDefined();
+    });
+
+    test('ushell src when ui5 version is 1.x', async () => {
+        fetchMock.mockResolvedValueOnce({
+            json: () => Promise.resolve({ version: '1.126.0' })
+        } as jest.Mocked<Response>);
+
+        await ushellBootstrap(() => {});
+        expect(htmlElement.setAttribute).toHaveBeenCalledWith('src', '/test-resources/sap/ushell/bootstrap/sandbox.js');
+    });
+
+    test('ushell src when ui5 version is 2.0', async () => {
+        fetchMock.mockResolvedValue({
+            json: () => Promise.resolve({ version: '2.0.0' })
+        } as jest.Mocked<Response>);
+
+        await ushellBootstrap(() => {});
+        expect(htmlElement.setAttribute).toHaveBeenCalledWith('src', '/resources/sap/ushell/bootstrap/sandbox2.js');
+    });
+
+    test('fetching version failed', async () => {
+        fetchMock.mockRejectedValueOnce('404');
+
+        await ushellBootstrap(() => {});
+        expect(htmlElement.setAttribute).toHaveBeenCalledWith('src', '/test-resources/sap/ushell/bootstrap/sandbox.js');
+    });
+});

packages/preview-middleware-client/test/unit/flp/init.test.ts

@@ -12,6 +12,7 @@ import * as apiHandler from '../../../src/adp/api-handler';
 import { fetchMock, sapMock } from 'mock/window';
 import type { InitRtaScript, RTAPlugin, StartAdaptation } from 'sap/ui/rta/api/startAdaptation';
 import type { Scenario } from '@sap-ux-private/control-property-editor-common';
+import VersionInfo from 'mock/sap/ui/VersionInfo';
 
 describe('flp/init', () => {
     test('registerSAPFonts', () => {
@@ -196,6 +197,7 @@ describe('flp/init', () => {
         });
 
         test('nothing configured', async () => {
+            VersionInfo.load.mockResolvedValue({ version: '1.118.1' });
             await init({});
             expect(sapMock.ushell.Container.attachRendererCreatedEvent).not.toBeCalled();
             expect(sapMock.ushell.Container.createRenderer).toBeCalledWith(undefined, true);
@@ -207,7 +209,7 @@ describe('flp/init', () => {
                 layer: 'CUSTOMER_BASE',
                 pluginScript: 'my/script'
             };
-            sapMock.ui.version = '1.84.50';
+            VersionInfo.load.mockResolvedValue({ version: '1.84.50' });
             await init({ flex: JSON.stringify(flexSettings) });
             expect(sapMock.ushell.Container.attachRendererCreatedEvent).toBeCalled();
             expect(sapMock.ushell.Container.createRenderer).toBeCalledWith(undefined, true);
@@ -245,7 +247,7 @@ describe('flp/init', () => {
                 layer: 'CUSTOMER_BASE',
                 pluginScript: 'my/script'
             };
-            sapMock.ui.version = '1.71.60';
+            VersionInfo.load.mockResolvedValue({ version: '1.71.60' });
             await init({ flex: JSON.stringify(flexSettings) });
             expect(sapMock.ushell.Container.attachRendererCreatedEvent).toBeCalled();
             expect(sapMock.ushell.Container.createRenderer).toBeCalledWith(undefined, true);
@@ -275,17 +277,26 @@ describe('flp/init', () => {
             const initRtaMock = jest.fn();
             const plugnScriptMock = jest.fn();
             await requireCb(initRtaMock, plugnScriptMock);
-            expect(initRtaMock).toBeCalledWith(expect.anything(), plugnScriptMock);
+            expect(initRtaMock).toBeCalled();
         });
 
         test('custom init module configured & ui5 version is 1.120.9', async () => {
             const customInit = 'my/app/test/integration/opaTests.qunit';
-            sapMock.ui.version = '1.120.09';
+            VersionInfo.load.mockResolvedValue({ version: '1.120.9' });
+
             await init({ customInit: customInit });
 
             expect(sapMock.ui.require).toBeCalledWith([customInit]);
-
             expect(sapMock.ushell.Container.createRenderer).toBeCalledWith(undefined, true);
         });
+
+        test('custom init module configured & ui5 version is 2.0.0', async () => {
+            const customInit = 'my/app/test/integration/opaTests.qunit';
+            VersionInfo.load.mockResolvedValue({ version: '2.0.0' });
+
+            await init({ customInit: customInit });
+
+            expect(sapMock.ui.require).toBeCalledWith([customInit]);
+        });
     });
 });

packages/preview-middleware-client/test/unit/flp/initConnectors.test.ts

@@ -1,14 +1,16 @@
 import { sapMock } from 'mock/window';
-import { initConnectors } from '../../../src/flp/initConnectors';
+import VersionInfo from 'mock/sap/ui/VersionInfo';
+import initConnectors from '../../../src/flp/initConnectors';
 
 describe('flp/initConnectors', () => {
     afterEach(() => {
         jest.restoreAllMocks();
     });
 
-    test('enables fake lrep connector when ui5 version is 1.71', () => {
+    test('enables fake lrep connector when ui5 version is 1.71', async () => {
         sapMock.ui.version = '1.71.60';
-        initConnectors();
+        VersionInfo.load.mockResolvedValue({ version: '1.71.60' });
+        await initConnectors();
 
         expect(sapMock.ui.require).toBeCalledWith(
             ['open/ux/preview/client/flp/enableFakeConnector'],
@@ -22,10 +24,11 @@ describe('flp/initConnectors', () => {
         expect(enableFakeConSpy).toHaveBeenCalled();
     });
 
-    test('defines a local connector for writing and applying changes and returns it', () => {
+    test('defines a local connector for writing and applying changes and returns it', async () => {
         sapMock.ui.version = '1.120.4';
+        VersionInfo.load.mockResolvedValue({ version: '1.120.4' });
 
-        initConnectors();
+        await initConnectors();
 
         const WorkspaceConnectorMock = { layers: [] };
         const requireCb = sapMock.ui.define.mock.calls[0][2] as (WorkspaceConnector: unknown) => void;

packages/preview-middleware-client/types/global.d.ts

@@ -0,0 +1,5 @@
+interface Window {
+    'sap-ui-config': {
+        [key: string]: (fnCallback: () => void) => void;
+    };
+}

packages/preview-middleware-client/types/sap.ushell.d.ts

@@ -0,0 +1,31 @@
+declare namespace sap.ushell {
+    import type ComponentContainer from 'sap/ui/core/ComponentContainer';
+
+    export class Container {
+        static getServiceAsync<T = unknown>(name: string): Promise<T>;
+        static attachRendererCreatedEvent(callback: Function): void;
+        static createRenderer(): ComponentContainer;
+        static createRenderer(async: true): Promise<ComponentContainer>;
+        static createRenderer(renderer?: string, async?: true): Promise<ComponentContainer>;
+        static createRendererInternal(renderer?: string, async: true): Promise<ComponentContainer>;
+    }
+}
+
+declare module 'sap/ushell/services/AppLifeCycle' {
+    import UI5Event from 'sap/ui/base/Event';
+    import Control from 'sap/ui/core/Control';
+
+    interface AppLifeCycle {
+        attachAppLoaded(callback: (event: UI5Event<{ componentInstance: Control }>) => void): void;
+    }
+
+    export default AppLifeCycle;
+}
+
+declare module 'sap/ushell/services/AppState' {
+    interface AppState {
+        deleteAppState(appStateValue: string): void;
+    }
+
+    export default AppState;
+}

packages/preview-middleware/templates/flp/sandbox.html

@@ -40,7 +40,8 @@
         };
     </script>
 
-    <script src="<%- basePath %>/test-resources/sap/ushell/bootstrap/sandbox.js" id="sap-ushell-bootstrap"></script>
+    <script src="/preview/client/flp/bootstrap.js" id="preview-bootstrap"></script>
+    <script id="sap-ushell-bootstrap"></script>
     <!-- Bootstrap the UI5 core library. 'data-sap-ui-frameOptions="allow"'' is a NON-SECURE setting for test environments -->
     <script id="sap-ui-bootstrap"
         src="<%- basePath %>/resources/sap-ui-core.js"
@@ -61,10 +62,6 @@
         data-open-ux-preview-libs-manifests='<%- JSON.stringify(Object.values(apps).map(app => app.url)) %>'<% } %>>
     </script>
 
-    <script type="text/javascript">
-        (() => sap.ui.require(['open/ux/preview/client/flp/initConnectors']))()
-    </script>
-
 <% if (locals.flex && flex?.developerMode) { %>
         <!-- Hides Rta native toolbar  -->
     <style>