WIP feat(project-access): add path-mappings for ui5 project type 'component'

package.json

@@ -41,7 +41,8 @@
         "typescript-eslint": "8.49.0",
         "update-ts-references": "3.6.2",
         "yargs-parser": "21.1.1",
-        "yaml":  "2.8.2"
+        "yaml": "2.8.2",
+        "@sap-ux/ui5-config": "workspace:*"
     },
     "scripts": {
         "update-ts-references": "update-ts-references",

packages/adp-tooling/test/unit/preview/adp-preview.test.ts

@@ -20,6 +20,8 @@ import * as manifestService from '../../../src/base/abap/manifest-service';
 import type { AddXMLChange, AdpPreviewConfig, CommonChangeProperties } from '../../../src';
 import { addXmlFragment, tryFixChange, addControllerExtension } from '../../../src/preview/change-handler';
 import { addCustomSectionFragment } from '../../../src/preview/descriptor-change-handler';
+// eslint-disable-next-line sonarjs/no-implicit-dependencies
+import type { MiddlewareUtils } from '@ui5/server';
 
 interface GetFragmentsResponse {
     fragments: { fragmentName: string }[];
@@ -142,10 +144,13 @@ describe('AdaptationProject', () => {
                 },
                 getNamespace() {
                     return 'adp/project';
+                },
+                getType() {
+                    return 'application';
                 }
             };
         }
-    };
+    } as unknown as MiddlewareUtils;
 
     const logger = new ToolsLogger();
     describe('init', () => {

packages/app-config-writer/src/preview-config/preview-files.ts

@@ -1,5 +1,5 @@
-import { join } from 'node:path';
-import { getWebappPath } from '@sap-ux/project-access';
+import { join, basename } from 'node:path';
+import { getWebappTestPath } from '@sap-ux/project-access';
 import type { Editor } from 'mem-fs-editor';
 import type { ToolsLogger } from '@sap-ux/logger';
 import { TEST_CONFIG_DEFAULTS } from '../common/ui5-yaml';
@@ -22,7 +22,9 @@ const renameMessage = (filePath: string): string =>
  * @param logger logger to report info to the user
  */
 export async function renameSandbox(fs: Editor, basePath: string, path: string, logger?: ToolsLogger): Promise<void> {
-    const filePath = join(await getWebappPath(basePath), path);
+    const webappTestPath = await getWebappTestPath(basePath);
+    const fileName = basename(path);
+    const filePath = join(webappTestPath, fileName);
     if (fs.exists(filePath)) {
         fs.move(filePath, filePath.replace('.html', '_old.html'));
         logger?.info(renameMessage(path));
@@ -86,7 +88,7 @@ export async function deleteNoLongerUsedFiles(
     convertTests: boolean,
     logger?: ToolsLogger
 ): Promise<void> {
-    const webappTestPath = join(await getWebappPath(basePath, fs), 'test');
+    const webappTestPath = await getWebappTestPath(basePath, fs);
     const files = [
         join(webappTestPath, 'locate-reuse-libs.js'),
         join(webappTestPath, 'changes_loader.js'),

packages/preview-middleware/src/base/config.ts

@@ -12,13 +12,21 @@ import type {
 } from '../types';
 import { render } from 'ejs';
 import { resolve, join, posix } from 'node:path';
-import { createProjectAccess, getWebappPath, type Manifest, type UI5FlexLayer } from '@sap-ux/project-access';
+import {
+    createProjectAccess,
+    getWebappPath,
+    getWebappTestPath,
+    type Manifest,
+    type UI5FlexLayer
+} from '@sap-ux/project-access';
 import { extractDoubleCurlyBracketsKey } from '@sap-ux/i18n';
 import { readFileSync } from 'node:fs';
 import { mergeTestConfigDefaults } from './test';
 import { type Editor, create } from 'mem-fs-editor';
 import { create as createStorage } from 'mem-fs';
 import type { MergedAppDescriptor } from '@sap-ux/axios-extension';
+// eslint-disable-next-line sonarjs/no-implicit-dependencies
+import type { MiddlewareUtils } from '@ui5/server';
 
 export interface CustomConnector {
     applyConnector: string;
@@ -182,22 +190,27 @@ function getUI5Libs(manifest: Partial<Manifest>): string {
  * Default configuration for the FLP.
  *
  * @param config partial configuration
+ * @param utils middleware utils
  * @returns a full configuration with default values
  */
-export function getFlpConfigWithDefaults(config: Partial<FlpConfig> = {}): FlpConfig {
-    const flpConfig = {
-        path: config.path ?? DEFAULT_PATH,
+export function getFlpConfigWithDefaults(config: Partial<FlpConfig> = {}, utils?: MiddlewareUtils): FlpConfig {
+    const sandboxPathPrefix =
+        typeof utils === 'object' && utils.getProject?.()?.getType?.() === 'component'
+            ? posix.join('/test-resources', utils.getProject().getNamespace())
+            : undefined;
+
+    // remove leading /test from default if sandboxPathPrefix is set
+    const defaultPath = sandboxPathPrefix ? DEFAULT_PATH.replace(/^\/test/, '') : DEFAULT_PATH;
+
+    return {
+        path: posix.join(sandboxPathPrefix ?? '/', config.path ?? defaultPath),
         intent: config.intent ?? DEFAULT_INTENT,
         apps: config.apps ?? [],
         libs: config.libs,
         theme: config.theme,
         init: config.init,
         enhancedHomePage: config.enhancedHomePage === true
     } satisfies FlpConfig;
-    if (!flpConfig.path.startsWith('/')) {
-        flpConfig.path = `/${flpConfig.path}`;
-    }
-    return flpConfig;
 }
 
 /**
@@ -423,15 +436,20 @@ export function createTestTemplateConfig(config: CompleteTestConfig, id: string,
  * Returns the preview paths.
  *
  * @param config configuration from the ui5.yaml
+ * @param utils middleware utils
  * @param logger logger instance
  * @returns an array of preview paths
  */
-export function getPreviewPaths(config: MiddlewareConfig, logger: ToolsLogger = new ToolsLogger()): PreviewUrls[] {
+export function getPreviewPaths(
+    config: MiddlewareConfig,
+    utils: MiddlewareUtils,
+    logger: ToolsLogger = new ToolsLogger()
+): PreviewUrls[] {
     const urls: PreviewUrls[] = [];
     // remove incorrect configurations
     sanitizeConfig(config, logger);
     // add flp preview url
-    const flpConfig = getFlpConfigWithDefaults(config.flp);
+    const flpConfig = getFlpConfigWithDefaults(config.flp, utils);
     urls.push({ path: `${flpConfig.path}#${flpConfig.intent.object}-${flpConfig.intent.action}`, type: 'preview' });
     // add editor urls
     if (config.editors?.rta) {
@@ -442,7 +460,7 @@ export function getPreviewPaths(config: MiddlewareConfig, logger: ToolsLogger =
     // add test urls if configured
     if (config.test) {
         config.test.forEach((test) => {
-            const testConfig = mergeTestConfigDefaults(test);
+            const testConfig = mergeTestConfigDefaults(test, utils);
             urls.push({ path: testConfig.path, type: 'test' });
         });
     }
@@ -457,16 +475,20 @@ const TEMPLATE_PATH = join(__dirname, '../../templates');
  * @param configs array of test configurations
  * @param manifest application manifest
  * @param fs mem fs editor instance
- * @param webappPath webapp path
+ * @param webappTestPath webapp test path
  * @param flpTemplConfig FLP configuration
  */
 function generateTestRunners(
     configs: TestConfig[] | undefined,
     manifest: Manifest,
     fs: Editor,
-    webappPath: string,
+    webappTestPath: string,
     flpTemplConfig: TemplateConfig
 ): void {
+    // Strip trailing 'test' or '/test' from webappTestPath to avoid duplication
+    // since testConfig.path typically starts with '/test/'
+    const basePath = webappTestPath.replace(/[/\\]test$/, '');
+
     for (const test of configs ?? []) {
         const testConfig = mergeTestConfigDefaults(test);
         if (['QUnit', 'OPA5'].includes(test.framework)) {
@@ -476,14 +498,14 @@ function generateTestRunners(
                 manifest['sap.app'].id,
                 flpTemplConfig.ui5.theme
             );
-            fs.write(join(webappPath, testConfig.path), render(testTemplate, testTemplateConfig));
+            fs.write(join(basePath, testConfig.path), render(testTemplate, testTemplateConfig));
         } else if (test.framework === 'Testsuite') {
             const testTemplate = readFileSync(join(TEMPLATE_PATH, 'test/testsuite.qunit.ejs'), 'utf-8');
             const testTemplateConfig = {
                 basePath: flpTemplConfig.basePath,
                 initPath: testConfig.init
             };
-            fs.write(join(webappPath, testConfig.path), render(testTemplate, testTemplateConfig));
+            fs.write(join(basePath, testConfig.path), render(testTemplate, testTemplateConfig));
         }
     }
 }
@@ -507,15 +529,14 @@ export async function generatePreviewFiles(
     sanitizeConfig(config, logger);
 
     // create file system if not provided
-    if (!fs) {
-        fs = create(createStorage());
-    }
+    fs ??= create(createStorage());
 
     // generate FLP configuration
     const flpTemplate = readFileSync(join(TEMPLATE_PATH, 'flp/sandbox.ejs'), 'utf-8');
     const flpConfig = getFlpConfigWithDefaults(config.flp);
 
     const webappPath = await getWebappPath(basePath, fs);
+    const webappTestPath = await getWebappTestPath(basePath, fs);
     let manifest: Manifest | undefined;
     if (fs.exists(join(webappPath, 'manifest.json'))) {
         manifest = (await fs.readJSON(join(webappPath, 'manifest.json'))) as unknown as Manifest;
@@ -536,7 +557,7 @@ export async function generatePreviewFiles(
             },
             logger
         );
-        generateTestRunners(config.test, manifest, fs, webappPath, flpTemplConfig);
+        generateTestRunners(config.test, manifest, fs, webappTestPath, flpTemplConfig);
     } else {
         flpTemplConfig = createFlpTemplateConfig(flpConfig, {});
         flpPath = join(basePath, flpConfig.path);

packages/preview-middleware/src/base/flp.ts

@@ -128,7 +128,7 @@ export class FlpSandbox {
         this.logger = logger;
         this.project = project;
         this.utils = utils;
-        this.flpConfig = getFlpConfigWithDefaults(config.flp);
+        this.flpConfig = getFlpConfigWithDefaults(config.flp, this.utils);
         this.test = config.test;
         this.rta = config.editors?.rta ?? sanitizeRtaConfig(config.rta, logger); //NOSONAR
         logger.debug(`Config: ${JSON.stringify({ flp: this.flpConfig, rta: this.rta, test: this.test })}`);
@@ -182,10 +182,6 @@ export class FlpSandbox {
         this.addStandardRoutes();
 
         if (this.cardGenerator?.path) {
-            this.cardGenerator.path = this.cardGenerator.path.startsWith('/')
-                ? this.cardGenerator.path
-                : `/${this.cardGenerator.path}`;
-
             await this.addCardGeneratorMiddlewareRoute();
             await this.addStoreCardManifestRoute();
             await this.addStoreI18nKeysRoute();
@@ -421,14 +417,21 @@ export class FlpSandbox {
      */
     private addEditorRoutes(rta: RtaConfig): void {
         const cpe = dirname(require.resolve('@sap-ux/control-property-editor-sources'));
+        const sandboxPathPrefix =
+            typeof this.utils === 'object' && this.utils.getProject?.()?.getType?.() === 'component'
+                ? posix.join('/test-resources', this.utils.getProject().getNamespace())
+                : undefined;
         for (const editor of rta.endpoints) {
-            let previewUrl = editor.path.startsWith('/') ? editor.path : `/${editor.path}`;
+            let previewUrl = posix.join(sandboxPathPrefix ?? '/', editor.path);
             if (editor.developerMode) {
                 previewUrl = `${previewUrl}.inner.html`;
                 editor.pluginScript ??= 'open/ux/preview/client/cpe/init';
-                this.router.get(editor.path, async (_req: Request, res: Response) => {
-                    await this.editorGetHandlerDeveloperMode(res, rta, previewUrl);
-                });
+                this.router.get(
+                    posix.join(sandboxPathPrefix ?? '/', editor.path),
+                    async (_req: Request, res: Response) => {
+                        await this.editorGetHandlerDeveloperMode(res, rta, previewUrl);
+                    }
+                );
                 let path = dirname(editor.path);
                 if (!path.endsWith('/')) {
                     path = `${path}/`;
@@ -517,7 +520,17 @@ export class FlpSandbox {
      * @private
      */
     private async addCardGeneratorMiddlewareRoute(): Promise<void> {
-        const previewGeneratorPath = this.cardGenerator?.path ?? CARD_GENERATOR_DEFAULT.previewGeneratorSandbox;
+        const sandboxPathPrefix =
+            typeof this.utils === 'object' && this.utils.getProject?.()?.getType?.() === 'component'
+                ? posix.join('/test-resources', this.utils.getProject().getNamespace())
+                : undefined;
+        const previewGeneratorSandbox = sandboxPathPrefix
+            ? CARD_GENERATOR_DEFAULT.previewGeneratorSandbox.replace(/^\/test/, '')
+            : CARD_GENERATOR_DEFAULT.previewGeneratorSandbox;
+        const previewGeneratorPath = posix.join(
+            sandboxPathPrefix ?? '/',
+            this.cardGenerator?.path ?? previewGeneratorSandbox
+        );
         this.logger.debug(`Add route for ${previewGeneratorPath}`);
         this.router.get(
             previewGeneratorPath,
@@ -828,7 +841,7 @@ export class FlpSandbox {
             return;
         }
         const testsuite = readFileSync(join(__dirname, '../../templates/test/testsuite.qunit.ejs'), 'utf-8');
-        const config = mergeTestConfigDefaults(testsuiteConfig);
+        const config = mergeTestConfigDefaults(testsuiteConfig, this.utils);
         this.logger.debug(`Add route for ${config.path}`);
         this.router.get(
             config.path,
@@ -849,7 +862,7 @@ export class FlpSandbox {
             if (testConfig.framework === 'Testsuite') {
                 continue;
             }
-            const mergedConfig = mergeTestConfigDefaults(testConfig);
+            const mergedConfig = mergeTestConfigDefaults(testConfig, this.utils);
             testPaths.push(posix.relative(posix.dirname(config.path), mergedConfig.path));
         }
 
@@ -955,7 +968,7 @@ export class FlpSandbox {
         const ns = id.replace(/\./g, '/');
         const htmlTemplate = readFileSync(join(__dirname, '../../templates/test/qunit.ejs'), 'utf-8');
         for (const testConfig of configs) {
-            const config = mergeTestConfigDefaults(testConfig);
+            const config = mergeTestConfigDefaults(testConfig, this.utils);
             this.logger.debug(`Add route for ${config.path}`);
             // add route for the *.qunit.html
             this.router.get(

packages/preview-middleware/src/base/test.ts

@@ -1,6 +1,9 @@
 // eslint-disable-next-line sonarjs/no-implicit-dependencies
 import type { Resource } from '@ui5/fs';
 import type { CompleteTestConfig, TestConfig, TestConfigDefaults } from '../types';
+// eslint-disable-next-line sonarjs/no-implicit-dependencies
+import type { MiddlewareUtils } from '@ui5/server';
+import { posix } from 'node:path';
 
 const DEFAULTS: Record<string, Readonly<CompleteTestConfig>> = {
     qunit: {
@@ -23,21 +26,54 @@
     }
 } satisfies TestConfigDefaults;
 
+/**
+ * Get the test path prefix for component projects.
+ *
+ * @param utils middleware utils
+ * @returns test path prefix or undefined
+ */
+function getTestPathPrefix(utils?: MiddlewareUtils): string | undefined {
+    if (typeof utils !== 'object') {
+        return undefined;
+    }
+    return utils.getProject?.()?.getType?.() === 'component'
+        ? posix.join('/test-resources', utils.getProject().getNamespace())
+        : undefined;
+}
+
 /**
  * Merge the given test configuration with the default values.
  *
  * @param config test configuration
+ * @param utils middleware utils
  * @returns merged test configuration
  */
-export function mergeTestConfigDefaults(config: TestConfig): CompleteTestConfig {
-    const defaults = DEFAULTS[config.framework.toLowerCase()] ?? {};
+export function mergeTestConfigDefaults(config: TestConfig, utils?: MiddlewareUtils): CompleteTestConfig {
+    const testPathPrefix = getTestPathPrefix(utils);
+    const defaults: CompleteTestConfig = DEFAULTS[config.framework.toLowerCase()] ?? {};
+
+    if (testPathPrefix) {
+        // remove leading /test from defaults if sandboxPathPrefix is set
+        defaults.pattern = defaults.pattern.replace(/^\/test/, '');
+        for (const prop of ['path', 'init'] as const) {
+            defaults[prop] = defaults[prop].replace(/^\/test/, '');
+        }
+    }
+
     const merged: CompleteTestConfig = { ...defaults, ...config };
-    if (!merged.path.startsWith('/')) {
-        merged.path = `/${merged.path}`;
+
+    if (testPathPrefix) {
+        // Prepend testPathPrefix
+        for (const prop of ['path', 'init'] as const) {
+            merged[prop] = posix.join(testPathPrefix, merged[prop]);
+        }
     }
-    if (!merged.init.startsWith('/')) {
-        merged.init = `/${config.init}`;
+
+    // Ensure path and init start with leading slash when no prefix exists
+    for (const prop of ['path', 'init'] as const) {
+        merged[prop] = posix.join('/', merged[prop]);
     }
+
     return merged;
 }
 

packages/preview-middleware/src/ui5/middleware.ts

@@ -46,7 +46,7 @@ async function createRouter(
     }
 
     // add exposed endpoints for cds-plugin-ui5
-    flp.router.getAppPages = (): string[] => getPreviewPaths(config).map(({ path }) => path);
+    flp.router.getAppPages = (): string[] => getPreviewPaths(config, middlewareUtil).map(({ path }) => path);
     return flp.router;
 }