Merge remote-tracking branch 'origin/main' into ui5-2.0-FF_template-u…

…pdate

* origin/main:
  chore: apply latest changesets
  fix: Modified indicators incorrectly displayed for some UI5 controls in Adaptation Project (#2264)
  chore: apply latest changesets
  fix(ui-components): `calloutCollisionTransformation` gets overwritten when external listeners are passed(calloutProps.preventDismissOnEvent, calloutProps.layerProps.onLayerDidMount, calloutProps.layerProps.onLayerWillUnmount) (#2497)
  chore: apply latest changesets
  Feat/create command for variants configuration (#2446)

examples/ui-prompting-examples/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @sap-ux-private/ui-prompting-examples
 
+## 0.2.11
+
+### Patch Changes
+
+-   Updated dependencies [f7c606c]
+    -   @sap-ux/ui-components@1.20.1
+    -   @sap-ux/ui-prompting@0.2.11
+
 ## 0.2.10
 
 ### Patch Changes

examples/ui-prompting-examples/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@sap-ux-private/ui-prompting-examples",
-    "version": "0.2.10",
+    "version": "0.2.11",
     "description": "This project contains UI storybook stories with exampleS with prompt ui and FPM based building blocks.",
     "license": "Apache-2.0",
     "private": true,

packages/app-config-writer/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @sap-ux/app-config-writer
 
+## 0.4.44
+
+### Patch Changes
+
+-   c3a8ebe: Introduce create command to add Configuration for Variants Creation.
+
 ## 0.4.43
 
 ### Patch Changes

packages/app-config-writer/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@sap-ux/app-config-writer",
     "description": "Add or update configuration for SAP Fiori tools application",
-    "version": "0.4.43",
+    "version": "0.4.44",
     "repository": {
         "type": "git",
         "url": "https://github.com/SAP/open-ux-tools.git",
@@ -43,6 +43,7 @@
         "prompts": "2.4.2"
     },
     "devDependencies": {
+        "@sap-ux/preview-middleware": "workspace:*",
         "@types/ejs": "3.1.2",
         "@types/mem-fs": "1.1.2",
         "@types/mem-fs-editor": "7.0.1",

packages/app-config-writer/src/index.ts

@@ -1,3 +1,4 @@
 export { getSmartLinksTargetFromPrompt, promptInboundNavigationConfig, validateText } from './prompt';
 export { generateSmartLinksConfig } from './smartlinks-config';
 export { generateInboundNavigationConfig } from './navigation-config';
+export { generateVariantsConfig } from './variants-config';

packages/app-config-writer/src/types/index.ts

@@ -1,2 +1,3 @@
 export * from './smartLinks';
+export * from './variantsConfig';
 export * from './navigation';

packages/app-config-writer/src/types/variantsConfig.ts

@@ -0,0 +1,16 @@
+import type { MiddlewareConfig as PreviewConfig } from '@sap-ux/preview-middleware';
+
+export type FioriToolsDeprecatedPreviewConfig = {
+    component: string;
+    libs?: boolean;
+    ui5Theme?: string;
+};
+
+export type PreviewConfigOptions = FioriToolsDeprecatedPreviewConfig | PreviewConfig;
+
+export enum MiddlewareConfigs {
+    FioriToolsPreview = 'fiori-tools-preview',
+    PreviewMiddleware = 'preview-middleware',
+    ReloadMiddleware = 'reload-middleware',
+    FioriToolsAppreload = 'fiori-tools-appreload'
+}

packages/app-config-writer/src/variants-config/generateVariantsConfig.ts

@@ -0,0 +1,29 @@
+import { create } from 'mem-fs-editor';
+import { create as createStorage } from 'mem-fs';
+import { updateMiddlewares } from './ui5-yaml';
+import { addVariantsManagementScript } from './package-json';
+import type { Editor } from 'mem-fs-editor';
+import type { ToolsLogger } from '@sap-ux/logger';
+
+/**
+ * Add variants configuration to an app or project.
+ *
+ * @param basePath - the base path where the package.json and ui5.yaml is
+ * @param yamlPath - the path where the ui5.yaml is
+ * @param logger - logger
+ * @param fs - the memfs editor instance
+ * @returns Promise<Editor> - memfs editor instance with updated files
+ */
+export async function generateVariantsConfig(
+    basePath: string,
+    yamlPath?: string,
+    logger?: ToolsLogger,
+    fs?: Editor
+): Promise<Editor> {
+    if (!fs) {
+        fs = create(createStorage());
+    }
+    await addVariantsManagementScript(fs, basePath, yamlPath, logger);
+    await updateMiddlewares(fs, basePath, yamlPath, logger);
+    return fs;
+}

packages/app-config-writer/src/variants-config/index.ts

@@ -0,0 +1 @@
+export * from './generateVariantsConfig';

packages/app-config-writer/src/variants-config/package-json.ts

@@ -0,0 +1,56 @@
+import { join } from 'path';
+import { getSapClientFromPackageJson, getUI5UrlParameters, getRTAUrl } from './utils';
+import type { Editor } from 'mem-fs-editor';
+import type { Package } from '@sap-ux/project-access';
+import type { ToolsLogger } from '@sap-ux/logger';
+
+const ERROR_MSG = `Script 'start-variants-management' cannot be written to package.json.`;
+
+/**
+ * Add the start-variants-management script to the package.json.
+ *
+ * @param fs - mem-fs reference to be used for file access
+ * @param basePath - path to application root, where package.json is
+ * @param yamlPath - path to the ui5*.yaml file
+ * @param logger - logger
+ * @returns Promise<void> - rejects in case variants management script can't be added to package.json
+ */
+export async function addVariantsManagementScript(
+    fs: Editor,
+    basePath: string,
+    yamlPath?: string,
+    logger?: ToolsLogger
+): Promise<void> {
+    const packageJsonPath = join(basePath, 'package.json');
+    const packageJson = fs.readJSON(packageJsonPath) as Package | undefined;
+
+    if (!packageJson) {
+        throw new Error(`${ERROR_MSG} File 'package.json' not found at ${basePath}`);
+    }
+
+    if (packageJson?.scripts?.['start-variants-management']) {
+        throw new Error(`${ERROR_MSG} Script already exists.`);
+    }
+
+    if (!packageJson.scripts) {
+        logger?.warn(`File 'package.json' does not contain a script section. Script section added.`);
+        packageJson.scripts = {};
+    }
+
+    const urlParameters: Record<string, string> = {};
+    const sapClient = getSapClientFromPackageJson(packageJson.scripts);
+    if (sapClient) {
+        urlParameters['sap-client'] = sapClient;
+    }
+
+    const url = await getRTAUrl(basePath, getUI5UrlParameters(urlParameters), yamlPath);
+
+    if (!url) {
+        throw new Error(`${ERROR_MSG} No RTA editor specified in ui5.yaml.`);
+    }
+
+    packageJson.scripts['start-variants-management'] = `fiori run --open "${url}"`;
+    fs.writeJSON(packageJsonPath, packageJson);
+    logger?.debug(`Script 'start-variants-management' written to 'package.json'.`);
+    return Promise.resolve();
+}

packages/app-config-writer/src/variants-config/ui5-yaml.ts

@@ -0,0 +1,99 @@
+import { basename, join } from 'path';
+import { MiddlewareConfigs } from '../types';
+import { FileName, type Package, readUi5Yaml } from '@sap-ux/project-access';
+import type { Editor } from 'mem-fs-editor';
+import type { ToolsLogger } from '@sap-ux/logger';
+import type { PreviewConfigOptions } from '../types';
+import type { CustomMiddleware, FioriAppReloadConfig, UI5Config } from '@sap-ux/ui5-config';
+import { getPreviewMiddleware } from './utils';
+
+/**
+ * Gets the reload middleware form the provided yamlConfig.
+ * The middleware can either be named 'fiori-tools-appreload' or 'reload-middleware'.
+ * If the middleware is found, a delay of 300ms will be inserted.
+ *
+ * @param yamlConfig - the yaml configuration to use
+ * @returns reload middleware configuration if found or undefined
+ */
+export async function getEnhancedReloadMiddleware(
+    yamlConfig: UI5Config
+): Promise<CustomMiddleware<FioriAppReloadConfig> | undefined> {
+    const reloadMiddleware =
+        yamlConfig.findCustomMiddleware<FioriAppReloadConfig>(MiddlewareConfigs.FioriToolsAppreload) ??
+        yamlConfig.findCustomMiddleware<FioriAppReloadConfig>(MiddlewareConfigs.ReloadMiddleware);
+    if (!reloadMiddleware) {
+        return undefined;
+    }
+    if (!reloadMiddleware?.configuration?.delay) {
+        reloadMiddleware.configuration = { ...reloadMiddleware.configuration, delay: 300 };
+    }
+    return reloadMiddleware;
+}
+
+/**
+ * Creates a preview middleware configuration based on the presence of the @sap/ux-ui5-tooling dependency.
+ *
+ * @param fs - mem-fs reference to be used for file access
+ * @param basePath - path to project root, where package.json and ui5.yaml is
+ * @returns 'fiori-tools-preview' or 'preview-middleware' configuration
+ */
+export function createPreviewMiddlewareConfig(fs: Editor, basePath: string): CustomMiddleware<PreviewConfigOptions> {
+    const packageJsonPath = join(basePath, 'package.json');
+    const packageJson = fs.readJSON(packageJsonPath) as Package | undefined;
+    return {
+        name: packageJson?.devDependencies?.['@sap/ux-ui5-tooling']
+            ? MiddlewareConfigs.FioriToolsPreview
+            : MiddlewareConfigs.PreviewMiddleware,
+        afterMiddleware: 'compression'
+    } as CustomMiddleware<PreviewConfigOptions>;
+}
+
+/**
+ * Checks the project for ui5.yaml files and reads out the configuration to update the preview and reload middlewares.
+ * If a reload middleware exists, then a delay of 300ms will be inserted and the preview middleware will be set afterward.
+ *
+ * @param fs - mem-fs reference to be used for file access
+ * @param basePath - path to project root, where package.json and ui5.yaml is
+ * @param yamlPath - the path where the ui5.yaml is
+ * @param logger - logger
+ */
+export async function updateMiddlewares(
+    fs: Editor,
+    basePath: string,
+    yamlPath?: string,
+    logger?: ToolsLogger
+): Promise<void> {
+    const ui5Yamls: string[] = [FileName.Ui5Yaml, FileName.Ui5MockYaml, FileName.Ui5LocalYaml];
+    if (yamlPath) {
+        ui5Yamls.unshift(basename(yamlPath));
+    }
+    for (const ui5Yaml of ui5Yamls) {
+        let ui5YamlConfig: UI5Config;
+        try {
+            ui5YamlConfig = await readUi5Yaml(basePath, ui5Yaml);
+        } catch (error) {
+            logger?.debug((error as Error).message);
+            continue;
+        }
+
+        let previewMiddleware = await getPreviewMiddleware(ui5YamlConfig);
+
+        if (!previewMiddleware) {
+            logger?.warn(`No preview middleware found in ${ui5Yaml}. Preview middleware will be added.`);
+            previewMiddleware = createPreviewMiddlewareConfig(fs, basePath);
+        }
+
+        const reloadMiddleware = await getEnhancedReloadMiddleware(ui5YamlConfig);
+
+        if (reloadMiddleware) {
+            previewMiddleware.afterMiddleware = reloadMiddleware.name;
+            ui5YamlConfig.updateCustomMiddleware(reloadMiddleware);
+            logger?.debug(`Updated reload middleware in ${ui5Yaml}.`);
+        }
+
+        ui5YamlConfig.updateCustomMiddleware(previewMiddleware);
+        const yamlPath = join(basePath, ui5Yaml);
+        fs.write(yamlPath, ui5YamlConfig.toString());
+        logger?.debug(`Updated preview middleware in ${ui5Yaml}.`);
+    }
+}