feat: Adapt CF projects' structure to work with preview-middleware

.changeset/eighty-coins-sip.md

@@ -0,0 +1,6 @@
+---
+'@sap-ux/generator-adp': patch
+'@sap-ux/adp-tooling': patch
+---
+
+feat: Adapt CF projects' structure to work with preview-middleware

packages/adp-tooling/src/cf/services/api.ts

@@ -108,7 +108,7 @@ export function getFDCRequestArguments(cfConfig: CfConfig): RequestArguments {
  * @param {string[]} appHostIds - The app host ids.
  * @param {CfConfig} cfConfig - The CF config.
  * @param {ToolsLogger} logger - The logger.
- * @returns {Promise<FDCResponse>} The FDC apps.
+ * @returns {Promise<CFApp[]>} The FDC apps.
  */
 export async function getFDCApps(appHostIds: string[], cfConfig: CfConfig, logger: ToolsLogger): Promise<CFApp[]> {
     const requestArguments = getFDCRequestArguments(cfConfig);

packages/adp-tooling/src/translations/adp-tooling.i18n.json

@@ -76,7 +76,7 @@
     },
     "error": {
         "appDoesNotSupportFlexibility": "The selected application does not support flexibility because it has `flexEnabled=false`. SAPUI5 Adaptation Project only supports applications that support flexibility. Please select a different application.",
-        "failedToParseXsAppJson": "Failed to parse `xs-app.json`. Error: {{error}}",
+        "failedToParseXsAppJson": "Failed to parse the `xs-app.json` file. Error: {{error}}",
         "failedToParseManifestJson": "Failed to parse the `manifest.json` file. Error: {{error}}",
         "oDataEndpointsValidationFailed": "Validation for the OData endpoints has failed. For more information, check the logs.",
         "adpDoesNotSupportSelectedApp": "Adaptation project doesn't support the selected application. Please select a different application.",

packages/adp-tooling/src/writer/cf.ts

@@ -7,7 +7,7 @@ import { adjustMtaYaml } from '../cf';
 import { getApplicationType } from '../source';
 import { fillDescriptorContent } from './manifest';
 import type { CfAdpWriterConfig, Content } from '../types';
-import { getCfVariant, writeCfTemplates } from './project-utils';
+import { getCfVariant, writeCfTemplates, writeUI5YamlCf } from './project-utils';
 import { getI18nDescription, getI18nModels, writeI18nModels } from './i18n';
 
 /**
@@ -53,6 +53,7 @@ export async function generateCf(
     fillDescriptorContent(variant.content as Content[], app.appType, ui5.version, app.i18nModels);
 
     await writeCfTemplates(basePath, variant, fullConfig, fs);
+    await writeUI5YamlCf(fullConfig.project.folder, fullConfig, fs);
 
     return fs;
 }

packages/adp-tooling/src/writer/options.ts

@@ -15,7 +15,8 @@ import type {
     CloudApp,
     InternalInboundNavigation,
     CloudCustomTaskConfig,
-    CloudCustomTaskConfigTarget
+    CloudCustomTaskConfigTarget,
+    CfAdpWriterConfig
 } from '../types';
 
 const VSCODE_URL = 'https://REQUIRED_FOR_VSCODE.example';
@@ -346,3 +347,60 @@ export function enhanceManifestChangeContentWithFlpConfig(
         manifestChangeContent.push(removeOtherInboundsChange);
     }
 }
+
+/**
+ * Generate custom configuration required for the ui5.yaml.
+ *
+ * @param {UI5Config} ui5Config - Configuration representing the ui5.yaml.
+ * @param {CfAdpWriterConfig} config - Full project configuration.
+ */
+export function enhanceUI5YamlWithCfCustomTask(ui5Config: UI5Config, config: CfAdpWriterConfig): void {
+    const { baseApp, cf, project } = config;
+    ui5Config.addCustomTasks([
+        {
+            name: 'app-variant-bundler-build',
+            beforeTask: 'escapeNonAsciiCharacters',
+            configuration: {
+                module: project.name,
+                appHostId: baseApp.appHostId,
+                appName: baseApp.appName,
+                appVersion: baseApp.appVersion,
+                html5RepoRuntime: cf.html5RepoRuntimeGuid,
+                org: cf.org.GUID,
+                space: cf.space.GUID,
+                sapCloudService: cf.businessSolutionName ?? '',
+                instanceName: cf.businessService
+            }
+        }
+    ]);
+}
+
+/**
+ * Generate custom configuration required for the ui5.yaml.
+ *
+ * @param {UI5Config} ui5Config - Configuration representing the ui5.yaml.
+ */
+export function enhanceUI5YamlWithCfCustomMiddleware(ui5Config: UI5Config): void {
+    const ui5ConfigOptions: Partial<FioriToolsProxyConfigUI5> = {
+        url: 'https://ui5.sap.com'
+    };
+
+    ui5Config.addFioriToolsProxyMiddleware(
+        {
+            ui5: ui5ConfigOptions,
+            backend: []
+        },
+        'compression'
+    );
+    ui5Config.addCustomMiddleware([
+        {
+            name: 'fiori-tools-preview',
+            afterMiddleware: 'fiori-tools-proxy',
+            configuration: {
+                flp: {
+                    theme: 'sap_horizon'
+                }
+            }
+        }
+    ]);
+}

packages/adp-tooling/src/writer/project-utils.ts

@@ -8,16 +8,17 @@ import {
     type CustomConfig,
     type TypesConfig,
     type CfAdpWriterConfig,
-    type DescriptorVariant,
-    ApplicationType
+    type DescriptorVariant
 } from '../types';
 import {
     enhanceUI5DeployYaml,
     enhanceUI5Yaml,
     hasDeployConfig,
     enhanceUI5YamlWithCustomConfig,
     enhanceUI5YamlWithCustomTask,
-    enhanceUI5YamlWithTranspileMiddleware
+    enhanceUI5YamlWithTranspileMiddleware,
+    enhanceUI5YamlWithCfCustomTask,
+    enhanceUI5YamlWithCfCustomMiddleware
 } from './options';
 
 import type { Package } from '@sap-ux/project-access';
@@ -125,30 +126,6 @@ export function getCfVariant(config: CfAdpWriterConfig): DescriptorVariant {
     return variant;
 }
 
-/**
- * Get the ADP config for the CF project.
- *
- * @param {CfAdpWriterConfig} config - The CF configuration.
- * @returns {Record<string, unknown>} The ADP config for the CF project.
- */
-export function getCfAdpConfig(config: CfAdpWriterConfig): Record<string, unknown> {
-    const { app, project, ui5, cf } = config;
-    const configJson = {
-        componentname: app.namespace,
-        appvariant: project.name,
-        layer: app.layer,
-        isOVPApp: app.appType === ApplicationType.FIORI_ELEMENTS_OVP,
-        isFioriElement: app.appType === ApplicationType.FIORI_ELEMENTS,
-        environment: 'CF',
-        ui5Version: ui5.version,
-        cfApiUrl: cf.url,
-        cfSpace: cf.space.GUID,
-        cfOrganization: cf.org.GUID
-    };
-
-    return configJson;
-}
-
 /**
  * Writes a given project template files within a specified folder in the project directory.
  *
@@ -212,6 +189,33 @@ export async function writeUI5Yaml(projectPath: string, data: AdpWriterConfig, f
     }
 }
 
+/**
+ * Writes a ui5.yaml file for CF project within a specified folder in the project directory.
+ *
+ * @param {string} projectPath - The root path of the project.
+ * @param {AdpWriterConfig} data - The data to be populated in the template file.
+ * @param {Editor} fs - The `mem-fs-editor` instance used for file operations.
+ * @returns {void}
+ */
+export async function writeUI5YamlCf(projectPath: string, data: CfAdpWriterConfig, fs: Editor): Promise<void> {
+    try {
+        const ui5ConfigPath = join(projectPath, 'ui5.yaml');
+        const baseUi5ConfigContent = fs.read(ui5ConfigPath);
+        const ui5Config = await UI5Config.newInstance(baseUi5ConfigContent);
+        ui5Config.setConfiguration({ propertiesFileSourceEncoding: 'UTF-8', paths: { webapp: 'dist' } });
+
+        /** Builder task */
+        enhanceUI5YamlWithCfCustomTask(ui5Config, data);
+
+        /** Middlewares */
+        enhanceUI5YamlWithCfCustomMiddleware(ui5Config);
+
+        fs.write(ui5ConfigPath, ui5Config.toString());
+    } catch (e) {
+        throw new Error(`Could not write ui5.yaml file. Reason: ${e.message}`);
+    }
+}
+
 /**
  * Writes a ui5-deploy.yaml file within a specified folder in the project directory.
  *
@@ -251,7 +255,7 @@ export async function writeCfTemplates(
 ): Promise<void> {
     const baseTmplPath = join(__dirname, '../../templates');
     const templatePath = config.options?.templatePathOverwrite ?? baseTmplPath;
-    const { app, baseApp, cf, project, options } = config;
+    const { app, project, options } = config;
 
     fs.copyTpl(
         join(templatePath, 'project/webapp/manifest.appdescr_variant'),
@@ -264,19 +268,9 @@ export async function writeCfTemplates(
     });
 
     fs.copyTpl(join(templatePath, 'cf/ui5.yaml'), join(project.folder, 'ui5.yaml'), {
-        appHostId: baseApp.appHostId,
-        appName: baseApp.appName,
-        appVersion: baseApp.appVersion,
-        module: project.name,
-        html5RepoRuntime: cf.html5RepoRuntimeGuid,
-        org: cf.org.GUID,
-        space: cf.space.GUID,
-        sapCloudService: cf.businessSolutionName ?? '',
-        instanceName: cf.businessService
+        module: project.name
     });
 
-    fs.writeJSON(join(project.folder, '.adp/config.json'), getCfAdpConfig(config));
-
     fs.copyTpl(join(templatePath, 'cf/i18n/i18n.properties'), join(project.folder, 'webapp/i18n/i18n.properties'), {
         module: project.name,
         moduleTitle: app.title,

packages/adp-tooling/templates/cf/package.json

@@ -4,6 +4,7 @@
 	"description": "",
 	"main": "index.js",
 	"scripts": {
+		"start": "fiori run --open /test/flp.html#app-preview",
 		"build": "npm run clean && ui5 build --include-task=generateCachebusterInfo && npm run zip",
 		"zip": "cd dist && npx bestzip ../<%= module %>.zip *",
 		"clean": "npx rimraf <%= module %>.zip dist",
@@ -22,7 +23,8 @@
 	"devDependencies": {
 		"@sap/ui5-builder-webide-extension": "1.0.x",
 		"@sapui5/ts-types": "^1.85.1",
-		"@ui5/cli": "^3.0.0",
+		"@sap/ux-ui5-tooling": "1",
+		"@ui5/cli": "^4.0.16",
 		"@ui5/task-adaptation": "^1.0.x",
 		"bestzip": "2.1.4",
 		"rimraf": "3.0.2"

packages/adp-tooling/templates/cf/ui5.yaml

@@ -3,17 +3,3 @@ specVersion: "2.2"
 type: application
 metadata:
   name: <%= module %>
-builder:
-  customTasks:
-    - name: app-variant-bundler-build
-      beforeTask: escapeNonAsciiCharacters
-      configuration:
-        appHostId: <%= appHostId %>
-        appName: <%= appName %>
-        appVersion: <%= appVersion %>
-        moduleName: <%= module %>
-        org: <%= org %>
-        space: <%= space %>
-        html5RepoRuntime: <%= html5RepoRuntime %>
-        sapCloudService: <%= sapCloudService %>
-        serviceInstanceName: <%= instanceName %>