@sap-ux/preview-middleware 0.13.18 → 0.13.20

package/dist/base/flex.d.ts

@@ -1,19 +1,8 @@
 /// <reference path="../../../../types/ui5.d.ts" />
 import type { Logger } from '@sap-ux/logger';
 import type { ReaderCollection } from '@ui5/fs';
-/**
- * Structure of a flex change.
- */
-export interface FlexChange {
-    [key: string]: string | object | undefined;
-    changeType: string;
-    reference: string;
-    moduleName?: string;
-    content?: {
-        codeRef?: string;
-        fragmentPath?: string;
-    };
-}
+import type { Editor } from 'mem-fs-editor';
+import type { CommonChangeProperties } from '@sap-ux/adp-tooling';
 /**
  * Read changes from the file system and return them.
  *
@@ -21,7 +10,7 @@ export interface FlexChange {
  * @param logger logger instance
  * @returns object with the file name as key and the file content as value
  */
-export declare function readChanges(project: ReaderCollection, logger: Logger): Promise<Record<string, FlexChange>>;
+export declare function readChanges(project: ReaderCollection, logger: Logger): Promise<Record<string, CommonChangeProperties>>;
 /**
  * Writes flex changes to the user's workspace.
  *
@@ -29,13 +18,14 @@ export declare function readChanges(project: ReaderCollection, logger: Logger):
  * @param data.fileName file name that is required for a valid change
  * @param data.fileType file type that is required
  * @param webappPath path to the webapp folder
+ * @param fs mem-fs editor
  * @param logger logger instance
  * @returns object with success flag and optional message
  */
 export declare function writeChange(data: object & {
     fileName?: string;
     fileType?: string;
-}, webappPath: string, logger: Logger): {
+}, webappPath: string, fs: Editor, logger: Logger): {
     success: boolean;
     message?: string;
 };

package/dist/base/flex.js

@@ -12,28 +12,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.deleteChange = exports.writeChange = exports.readChanges = void 0;
 const fs_1 = require("fs");
 const path_1 = require("path");
-/**
- * Map of change type specific correction functions.
- */
-const moduleNameContentMap = {
-    codeExt: (change) => { var _a, _b; return ((_b = (_a = change.content) === null || _a === void 0 ? void 0 : _a.codeRef) !== null && _b !== void 0 ? _b : '').replace('.js', ''); },
-    addXML: (change) => { var _a, _b; return (_b = (_a = change.content) === null || _a === void 0 ? void 0 : _a.fragmentPath) !== null && _b !== void 0 ? _b : ''; }
-};
-/**
- * Sets the moduleName property of the provided change to also support old changes with newer UI5 versions.
- *
- * @param change change to be fixed
- * @param logger logger instance
- */
-function tryFixChange(change, logger) {
-    try {
-        const prefix = change.reference.replace(/\./g, '/');
-        change.moduleName = `${prefix}/changes/${moduleNameContentMap[change.changeType](change)}`;
-    }
-    catch (error) {
-        logger.warn('Could not fix missing module name.');
-    }
-}
 /**
  * Read changes from the file system and return them.
  *
@@ -48,9 +26,6 @@ function readChanges(project, logger) {
         for (const file of files) {
             try {
                 const change = JSON.parse(yield file.getString());
-                if (moduleNameContentMap[change.changeType] && !change.moduleName) {
-                    tryFixChange(change, logger);
-                }
                 changes[`sap.ui.fl.${(0, path_1.parse)(file.getName()).name}`] = change;
                 logger.debug(`Read change from ${file.getPath()}`);
             }
@@ -69,20 +44,17 @@ exports.readChanges = readChanges;
  * @param data.fileName file name that is required for a valid change
  * @param data.fileType file type that is required
  * @param webappPath path to the webapp folder
+ * @param fs mem-fs editor
  * @param logger logger instance
  * @returns object with success flag and optional message
  */
-function writeChange(data, webappPath, logger) {
+function writeChange(data, webappPath, fs, logger) {
     const fileName = data.fileName;
     const fileType = data.fileType;
     if (fileName && fileType) {
         logger.debug(`Write change ${fileName}.${fileType}`);
-        const path = (0, path_1.join)(webappPath, 'changes');
-        if (!(0, fs_1.existsSync)(path)) {
-            (0, fs_1.mkdirSync)(path);
-        }
-        const filePath = (0, path_1.join)(path, fileName + '.' + fileType);
-        (0, fs_1.writeFileSync)(filePath, JSON.stringify(data, null, 2));
+        const filePath = (0, path_1.join)(webappPath, 'changes', fileName + '.' + fileType);
+        fs.writeJSON(filePath, data);
         const message = `FILE_CREATED ${fileName}.${fileType}`;
         return { success: true, message };
     }

package/dist/base/flp.d.ts

@@ -1,11 +1,12 @@
 /// <reference path="../../../../types/ui5.d.ts" />
 import type { ReaderCollection } from '@ui5/fs';
+import type { Editor as MemFsEditor } from 'mem-fs-editor';
 import type { Router } from 'express';
-import type { App, FlpConfig, MiddlewareConfig, RtaConfig, TestConfig } from '../types';
 import type { Logger, ToolsLogger } from '@sap-ux/logger';
 import type { MiddlewareUtils } from '@ui5/server';
 import type { Manifest, UI5FlexLayer } from '@sap-ux/project-access';
-import { type AdpPreviewConfig } from '@sap-ux/adp-tooling';
+import { type AdpPreviewConfig, type CommonChangeProperties, type OperationType } from '@sap-ux/adp-tooling';
+import type { App, FlpConfig, MiddlewareConfig, RtaConfig, TestConfig } from '../types';
 /**
  * Enhanced request handler that exposes a list of endpoints for the cds-plugin-ui5.
  */
@@ -53,6 +54,7 @@ export interface TemplateConfig {
     };
     locateReuseLibsScript?: boolean;
 }
+type OnChangeRequestHandler = (type: OperationType, change: CommonChangeProperties, fs: MemFsEditor, logger: Logger) => Promise<void>;
 /**
  * Class handling preview of a sandbox FLP.
  */
@@ -60,6 +62,7 @@ export declare class FlpSandbox {
     private readonly project;
     private readonly utils;
     private readonly logger;
+    protected onChangeRequest: OnChangeRequestHandler | undefined;
     protected templateConfig: TemplateConfig;
     readonly config: FlpConfig;
     readonly rta?: RtaConfig;
@@ -74,6 +77,12 @@ export declare class FlpSandbox {
      * @param logger logger instance
      */
     constructor(config: Partial<MiddlewareConfig>, project: ReaderCollection, utils: MiddlewareUtils, logger: Logger);
+    /**
+     * Registers a handler function to be called when a change request occurs.
+     *
+     * @param {OnChangeRequestHandler} handler - The function to be executed when a change request occurs.
+     */
+    addOnChangeRequestHandler(handler: OnChangeRequestHandler): void;
     /**
      * Initialize the FLP sandbox router.
      *
@@ -173,4 +182,5 @@ export declare class FlpSandbox {
  * @param logger logger instance
  */
 export declare function initAdp(rootProject: ReaderCollection, config: AdpPreviewConfig, flp: FlpSandbox, util: MiddlewareUtils, logger: ToolsLogger): Promise<void>;
+export {};
 //# sourceMappingURL=flp.d.ts.map

package/dist/base/flp.js

@@ -10,13 +10,15 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.initAdp = exports.FlpSandbox = void 0;
+const mem_fs_1 = require("mem-fs");
+const mem_fs_editor_1 = require("mem-fs-editor");
 const ejs_1 = require("ejs");
 const fs_1 = require("fs");
 const path_1 = require("path");
 const express_1 = require("express");
-const flex_1 = require("./flex");
-const project_access_1 = require("@sap-ux/project-access");
 const adp_tooling_1 = require("@sap-ux/adp-tooling");
+const project_access_1 = require("@sap-ux/project-access");
+const flex_1 = require("./flex");
 const test_1 = require("./test");
 const DEVELOPER_MODE_CONFIG = new Map([
     // Run application in design time mode
@@ -114,6 +116,14 @@ class FlpSandbox {
         logger.debug(`Config: ${JSON.stringify({ flp: this.config, rta: this.rta, test: this.test })}`);
         this.router = (0, express_1.Router)();
     }
+    /**
+     * Registers a handler function to be called when a change request occurs.
+     *
+     * @param {OnChangeRequestHandler} handler - The function to be executed when a change request occurs.
+     */
+    addOnChangeRequestHandler(handler) {
+        this.onChangeRequest = handler;
+    }
     /**
      * Initialize the FLP sandbox router.
      *
@@ -321,16 +331,27 @@ class FlpSandbox {
      * Create required routes for flex.
      */
     createFlexHandler() {
+        const fs = (0, mem_fs_editor_1.create)((0, mem_fs_1.create)());
         const api = `${PREVIEW_URL.api}/changes`;
         this.router.use(api, (0, express_1.json)());
         this.router.get(api, ((_req, res) => __awaiter(this, void 0, void 0, function* () {
-            this.sendResponse(res, 'application/json', 200, JSON.stringify(yield (0, flex_1.readChanges)(this.project, this.logger)));
+            const changes = yield (0, flex_1.readChanges)(this.project, this.logger);
+            if (this.onChangeRequest) {
+                for (const change of Object.values(changes)) {
+                    yield this.onChangeRequest('read', change, fs, this.logger);
+                }
+            }
+            res.status(200).contentType('application/json').send(changes);
         })));
         this.router.post(api, ((req, res) => __awaiter(this, void 0, void 0, function* () {
             try {
-                const { success, message } = (0, flex_1.writeChange)(req.body, this.utils.getProject().getSourcePath(), this.logger);
+                const change = req.body;
+                if (this.onChangeRequest) {
+                    yield this.onChangeRequest('write', change, fs, this.logger);
+                }
+                const { success, message } = (0, flex_1.writeChange)(change, this.utils.getProject().getSourcePath(), fs, this.logger);
                 if (success) {
-                    this.sendResponse(res, 'text/plain', 200, message !== null && message !== void 0 ? message : '');
+                    fs.commit(() => res.status(200).send(message));
                 }
                 else {
                     this.sendResponse(res, 'text/plain', 400, 'INVALID_DATA');
@@ -565,6 +586,7 @@ function initAdp(rootProject, config, flp, util, logger) {
             const { name, manifest } = descriptor;
             yield flp.init(manifest, name, adp.resources);
             flp.router.use(adp.descriptor.url, adp.proxy.bind(adp));
+            flp.addOnChangeRequestHandler(adp.onChangeRequest.bind(adp));
             flp.router.use((0, express_1.json)());
             adp.addApis(flp.router);
         }

package/dist/client/adp/controllers/AddFragment.controller.js

@@ -1,6 +1,6 @@
 "use strict";
 
-sap.ui.define(["sap/m/MessageToast", "sap/ui/model/json/JSONModel", "sap/ui/dt/OverlayRegistry", "../control-utils", "../command-executor", "../api-handler", "./BaseDialog.controller"], function (MessageToast, JSONModel, OverlayRegistry, __ControlUtils, __CommandExecutor, ___api_handler, __BaseDialog) {
+sap.ui.define(["sap/m/MessageToast", "sap/ui/model/json/JSONModel", "sap/ui/dt/OverlayRegistry", "../control-utils", "../command-executor", "../api-handler", "./BaseDialog.controller", "../utils"], function (MessageToast, JSONModel, OverlayRegistry, __ControlUtils, __CommandExecutor, ___api_handler, __BaseDialog, ___utils) {
   "use strict";
 
   function _interopRequireDefault(obj) {
@@ -9,8 +9,8 @@ sap.ui.define(["sap/m/MessageToast", "sap/ui/model/json/JSONModel", "sap/ui/dt/O
   const ControlUtils = _interopRequireDefault(__ControlUtils);
   const CommandExecutor = _interopRequireDefault(__CommandExecutor);
   const getFragments = ___api_handler["getFragments"];
-  const writeFragment = ___api_handler["writeFragment"];
   const BaseDialog = _interopRequireDefault(__BaseDialog);
+  const notifyUser = ___utils["notifyUser"];
   /**
    * @namespace open.ux.preview.client.adp.controllers
    */
@@ -74,7 +74,8 @@ sap.ui.define(["sap/m/MessageToast", "sap/ui/model/json/JSONModel", "sap/ui/dt/O
         fragmentName,
         targetAggregation
       };
-      await this.createNewFragment(fragmentData);
+      await this.createFragmentChange(fragmentData);
+      notifyUser(`Note: The '${fragmentName}.fragment.xml' fragment will be created once you save the change.`, 8000);
       this.handleDialogClose();
     },
     buildDialogData: async function _buildDialogData() {
@@ -162,28 +163,6 @@ sap.ui.define(["sap/m/MessageToast", "sap/ui/model/json/JSONModel", "sap/ui/dt/O
       }
       return indexArray;
     },
-    createNewFragment: async function _createNewFragment(fragmentData) {
-      const {
-        fragmentName,
-        index,
-        targetAggregation
-      } = fragmentData;
-      try {
-        await writeFragment({
-          fragmentName
-        });
-        MessageToast.show(`Fragment with name '${fragmentName}' was created.`);
-      } catch (e) {
-        // In case of error when creating a new fragment, we should not create a change file
-        MessageToast.show(e.message);
-        throw new Error(e.message);
-      }
-      await this.createFragmentChange({
-        fragmentName,
-        index,
-        targetAggregation
-      });
-    },
     createFragmentChange: async function _createFragmentChange(fragmentData) {
       const {
         fragmentName,

package/dist/client/adp/controllers/AddFragment.controller.ts

@@ -23,8 +23,9 @@ import type ElementOverlay from 'sap/ui/dt/ElementOverlay';
 
 import ControlUtils from '../control-utils';
 import CommandExecutor from '../command-executor';
-import { getFragments, writeFragment } from '../api-handler';
+import { getFragments } from '../api-handler';
 import BaseDialog from './BaseDialog.controller';
+import { notifyUser } from '../utils';
 
 interface CreateFragmentProps {
     fragmentName: string;
@@ -142,7 +143,9 @@ export default class AddFragment extends BaseDialog {
             targetAggregation
         };
 
-        await this.createNewFragment(fragmentData);
+        await this.createFragmentChange(fragmentData);
+
+        notifyUser(`Note: The '${fragmentName}.fragment.xml' fragment will be created once you save the change.`, 8000);
 
         this.handleDialogClose();
     }
@@ -245,28 +248,6 @@ export default class AddFragment extends BaseDialog {
         return indexArray;
     }
 
-    /**
-     * Creates a new fragment for the specified control
-     *
-     * @param fragmentData Fragment Data
-     * @param fragmentData.index Index for XML Fragment placement
-     * @param fragmentData.fragmentName Fragment name
-     * @param fragmentData.targetAggregation Target aggregation for control
-     */
-    private async createNewFragment(fragmentData: CreateFragmentProps): Promise<void> {
-        const { fragmentName, index, targetAggregation } = fragmentData;
-        try {
-            await writeFragment<unknown>({ fragmentName });
-            MessageToast.show(`Fragment with name '${fragmentName}' was created.`);
-        } catch (e) {
-            // In case of error when creating a new fragment, we should not create a change file
-            MessageToast.show(e.message);
-            throw new Error(e.message);
-        }
-
-        await this.createFragmentChange({ fragmentName, index, targetAggregation });
-    }
-
     /**
      * Creates an addXML fragment command and pushes it to the command stack
      *

package/dist/client/adp/controllers/BaseDialog.controller.js

@@ -1,9 +1,10 @@
 "use strict";
 
-sap.ui.define(["sap/ui/core/library", "sap/ui/core/mvc/Controller"], function (sap_ui_core_library, Controller) {
+sap.ui.define(["sap/ui/core/library", "sap/ui/core/mvc/Controller", "../utils"], function (sap_ui_core_library, Controller, ___utils) {
   "use strict";
 
   const ValueState = sap_ui_core_library["ValueState"];
+  const matchesFragmentName = ___utils["matchesFragmentName"];
   /**
    * @namespace open.ux.preview.client.adp.controllers
    */
@@ -37,9 +38,25 @@ sap.ui.define(["sap/ui/core/library", "sap/ui/core/mvc/Controller"], function (s
         updateDialogState(ValueState.Error, 'A fragment file name cannot contain more than 64 characters.');
         return;
       }
+      const changeExists = this.checkForExistingChange(fragmentName);
+      if (changeExists) {
+        updateDialogState(ValueState.Error, 'Enter a different name. The fragment name entered matches the name of an unsaved fragment.');
+        return;
+      }
       updateDialogState(ValueState.Success);
       this.model.setProperty('/newFragmentName', fragmentName);
     },
+    checkForExistingChange: function _checkForExistingChange(fragmentName) {
+      const allCommands = this.rta.getCommandStack().getCommands();
+      return allCommands.some(command => {
+        if (command?.getProperty('name') === 'composite') {
+          const addXmlCommand = command.getCommands().find(c => c?.getProperty('name') === 'addXMLAtExtensionPoint');
+          return addXmlCommand && matchesFragmentName(addXmlCommand, fragmentName);
+        } else {
+          return matchesFragmentName(command, fragmentName);
+        }
+      });
+    },
     setEscapeHandler: function _setEscapeHandler() {
       this.dialog.setEscapeHandler(_ref => {
         let {

package/dist/client/adp/controllers/BaseDialog.controller.ts

@@ -7,8 +7,10 @@ import { ValueState } from 'sap/ui/core/library';
 import Controller from 'sap/ui/core/mvc/Controller';
 import JSONModel from 'sap/ui/model/json/JSONModel';
 import RuntimeAuthoring from 'sap/ui/rta/RuntimeAuthoring';
+import FlexCommand from 'sap/ui/rta/command/FlexCommand';
 
 import CommandExecutor from '../command-executor';
+import { matchesFragmentName } from '../utils';
 
 /**
  * @namespace open.ux.preview.client.adp.controllers
@@ -45,7 +47,7 @@ export default abstract class BaseDialog extends Controller {
 
     abstract setup(dialog: Dialog): Promise<void>;
 
-    abstract onCreateBtnPress(event: Event): Promise<void>;
+    abstract onCreateBtnPress(event: Event): Promise<void> | void;
 
     abstract buildDialogData(): Promise<void>;
 
@@ -54,7 +56,7 @@ export default abstract class BaseDialog extends Controller {
      *
      * @param event Event
      */
-    onFragmentNameInputChange(event: Event) {
+    onFragmentNameInputChange(event: Event): void {
         const input = event.getSource<Input>();
         const beginBtn = this.dialog.getBeginButton();
 
@@ -94,10 +96,42 @@ export default abstract class BaseDialog extends Controller {
             return;
         }
 
+        const changeExists = this.checkForExistingChange(fragmentName);
+
+        if (changeExists) {
+            updateDialogState(
+                ValueState.Error,
+                'Enter a different name. The fragment name entered matches the name of an unsaved fragment.'
+            );
+            return;
+        }
+
         updateDialogState(ValueState.Success);
         this.model.setProperty('/newFragmentName', fragmentName);
     }
 
+    /**
+     * Checks for the existence of a change associated with a specific fragment name in the RTA command stack.
+     *
+     * @param {string} fragmentName - The name of the fragment to check for existing changes.
+     * @returns {Promise<boolean>} A promise that resolves to `true` if a matching change is found, otherwise `false`.
+     */
+    checkForExistingChange(fragmentName: string): boolean {
+        const allCommands = this.rta.getCommandStack().getCommands();
+
+        return allCommands.some((command: FlexCommand) => {
+            if (command?.getProperty('name') === 'composite') {
+                const addXmlCommand = command
+                    .getCommands()
+                    .find((c: FlexCommand) => c?.getProperty('name') === 'addXMLAtExtensionPoint');
+
+                return addXmlCommand && matchesFragmentName(addXmlCommand, fragmentName);
+            } else {
+                return matchesFragmentName(command, fragmentName);
+            }
+        });
+    }
+
     /**
      * Sets custom function that fires when user presses escape key.
      */

package/dist/client/adp/controllers/ExtensionPoint.controller.js

@@ -1,22 +1,23 @@
 "use strict";
 
-sap.ui.define(["sap/m/MessageToast", "sap/ui/model/json/JSONModel", "../api-handler", "./BaseDialog.controller"], function (MessageToast, JSONModel, ___api_handler, __BaseDialog) {
+sap.ui.define(["sap/m/MessageToast", "sap/ui/model/json/JSONModel", "../api-handler", "./BaseDialog.controller", "../utils"], function (MessageToast, JSONModel, ___api_handler, __BaseDialog, ___utils) {
   "use strict";
 
   function _interopRequireDefault(obj) {
     return obj && obj.__esModule && typeof obj.default !== "undefined" ? obj.default : obj;
   }
   const getFragments = ___api_handler["getFragments"];
-  const writeFragment = ___api_handler["writeFragment"];
   const BaseDialog = _interopRequireDefault(__BaseDialog);
+  const notifyUser = ___utils["notifyUser"];
   /**
    * @namespace open.ux.preview.client.adp.controllers
    */
   const ExtensionPoint = BaseDialog.extend("open.ux.preview.client.adp.controllers.ExtensionPoint", {
-    constructor: function _constructor(name, _overlays, _rta, data) {
+    constructor: function _constructor(name, _overlays, rta, data) {
       BaseDialog.prototype.constructor.call(this, name);
       this.model = new JSONModel();
       this.data = data;
+      this.rta = rta;
     },
     setup: async function _setup(dialog) {
       this.dialog = dialog;
@@ -25,11 +26,12 @@ sap.ui.define(["sap/m/MessageToast", "sap/ui/model/json/JSONModel", "../api-hand
       this.dialog.setModel(this.model);
       this.dialog.open();
     },
-    onCreateBtnPress: async function _onCreateBtnPress(event) {
+    onCreateBtnPress: function _onCreateBtnPress(event) {
       const source = event.getSource();
       source.setEnabled(false);
       const fragmentName = this.model.getProperty('/newFragmentName');
-      await this.createNewFragment(fragmentName);
+      this.createExtensionPointFragmentChange(fragmentName);
+      notifyUser(`Note: The '${fragmentName}.fragment.xml' fragment will be created once you save the change.`, 8000);
       this.handleDialogClose();
     },
     onExtensionPointHandler: function _onExtensionPointHandler(event) {
@@ -75,22 +77,10 @@ sap.ui.define(["sap/m/MessageToast", "sap/ui/model/json/JSONModel", "../api-hand
       this.model.setProperty('/extensionPointList', list);
       this.model.setProperty('/extensionListEnabled', enabled);
     },
-    createNewFragment: async function _createNewFragment(fragmentName) {
-      try {
-        await writeFragment({
-          fragmentName
-        });
-        MessageToast.show(`Fragment with name '${fragmentName}' was created.`);
-      } catch (e) {
-        // In case of error when creating a new fragment, we should not create a change file
-        MessageToast.show(e.message);
-        throw new Error(e.message);
-      }
-      this.createExtensionPointFragmentChange(fragmentName);
-    },
     createExtensionPointFragmentChange: function _createExtensionPointFragmentChange(fragmentName) {
       const extensionPointName = this.model.getProperty('/extensionPointName');
       const modifiedValue = {
+        fragment: `<core:FragmentDefinition xmlns:core='sap.ui.core'></core:FragmentDefinition>`,
         fragmentPath: `fragments/${fragmentName}.fragment.xml`,
         extensionPointName
       };

package/dist/client/adp/controllers/ExtensionPoint.controller.ts

@@ -16,9 +16,10 @@ import JSONModel from 'sap/ui/model/json/JSONModel';
 /** sap.ui.rta */
 import type RuntimeAuthoring from 'sap/ui/rta/RuntimeAuthoring';
 
-import { getFragments, writeFragment } from '../api-handler';
+import { getFragments } from '../api-handler';
 import BaseDialog from './BaseDialog.controller';
 import { ExtensionPointData, ExtensionPointInfo } from '../extension-point';
+import { notifyUser } from '../utils';
 
 /**
  * @namespace open.ux.preview.client.adp.controllers
@@ -26,10 +27,11 @@ import { ExtensionPointData, ExtensionPointInfo } from '../extension-point';
 export default class ExtensionPoint extends BaseDialog {
     public readonly data: ExtensionPointData;
 
-    constructor(name: string, _overlays: UI5Element, _rta: RuntimeAuthoring, data: ExtensionPointData) {
+    constructor(name: string, _overlays: UI5Element, rta: RuntimeAuthoring, data: ExtensionPointData) {
         super(name);
         this.model = new JSONModel();
         this.data = data;
+        this.rta = rta;
     }
 
     /**
@@ -54,13 +56,15 @@ export default class ExtensionPoint extends BaseDialog {
      *
      * @param event Event
      */
-    async onCreateBtnPress(event: Event): Promise<void> {
+    onCreateBtnPress(event: Event): void {
         const source = event.getSource<Button>();
         source.setEnabled(false);
 
         const fragmentName = this.model.getProperty('/newFragmentName');
 
-        await this.createNewFragment(fragmentName);
+        this.createExtensionPointFragmentChange(fragmentName);
+
+        notifyUser(`Note: The '${fragmentName}.fragment.xml' fragment will be created once you save the change.`, 8000);
 
         this.handleDialogClose();
     }
@@ -127,24 +131,6 @@ export default class ExtensionPoint extends BaseDialog {
         this.model.setProperty('/extensionListEnabled', enabled);
     }
 
-    /**
-     * Creates a new fragment for the specified extension point
-     *
-     * @param fragmentName Fragment name
-     */
-    private async createNewFragment(fragmentName: string): Promise<void> {
-        try {
-            await writeFragment<unknown>({ fragmentName });
-            MessageToast.show(`Fragment with name '${fragmentName}' was created.`);
-        } catch (e) {
-            // In case of error when creating a new fragment, we should not create a change file
-            MessageToast.show(e.message);
-            throw new Error(e.message);
-        }
-
-        this.createExtensionPointFragmentChange(fragmentName);
-    }
-
     /**
      * Creates add xml at extension point changes
      *
@@ -153,6 +139,7 @@ export default class ExtensionPoint extends BaseDialog {
     private createExtensionPointFragmentChange(fragmentName: string): void {
         const extensionPointName = this.model.getProperty('/extensionPointName');
         const modifiedValue = {
+            fragment: `<core:FragmentDefinition xmlns:core='sap.ui.core'></core:FragmentDefinition>`,
             fragmentPath: `fragments/${fragmentName}.fragment.xml`,
             extensionPointName
         };

package/dist/client/adp/utils.js

@@ -1,6 +1,6 @@
 "use strict";
 
-sap.ui.define([], function () {
+sap.ui.define(["sap/m/MessageToast"], function (MessageToast) {
   "use strict";
 
   /**
@@ -26,10 +26,38 @@ sap.ui.define([], function () {
       reject
     };
   }
+
+  /**
+   * Checks if the fragment name associated with a command matches the specified fragment name.
+   *
+   * @param {FlexCommand} command - The command object containing the prepared change to be examined.
+   * @param {string} fragmentName - The name of the fragment to match against the command's change.
+   * @returns {boolean} Returns true if the command's change contains a fragment path that matches
+   *                    the specified fragment name; otherwise, returns false.
+   */
+  function matchesFragmentName(command, fragmentName) {
+    const change = command.getPreparedChange().getDefinition();
+    return change.content?.fragmentPath?.includes(`${fragmentName}.fragment.xml`) || false;
+  }
+
+  /**
+   * Displays a message to the user indicating that an XML fragment will be created upon saving a change.
+   *
+   * @param {string} message - The message to be shown in the message toast.
+   * @param {number} duration - The duration during which message toast will be active.
+   */
+  function notifyUser(message) {
+    let duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 5000;
+    MessageToast.show(message, {
+      duration
+    });
+  }
   var __exports = {
     __esModule: true
   };
   __exports.createDeferred = createDeferred;
+  __exports.matchesFragmentName = matchesFragmentName;
+  __exports.notifyUser = notifyUser;
   return __exports;
 });
 //# sourceMappingURL=utils.js.map

package/dist/client/adp/utils.ts

@@ -1,9 +1,18 @@
+import MessageToast from 'sap/m/MessageToast';
+import type FlexCommand from 'sap/ui/rta/command/FlexCommand';
+
 export interface Deferred<T> {
     promise: Promise<T>;
     resolve: (value: T | PromiseLike<T>) => void;
     reject: (reason?: unknown) => void;
 }
 
+export interface FragmentChange {
+    content: {
+        fragmentPath: string;
+    };
+}
+
 /**
  * Defers the resolution of the promise, stores resolve/reject functions so that they can be accessed at a later stage.
  *
@@ -26,3 +35,28 @@ export function createDeferred<T>(): Deferred<T> {
 
     return { promise, resolve, reject };
 }
+
+/**
+ * Checks if the fragment name associated with a command matches the specified fragment name.
+ *
+ * @param {FlexCommand} command - The command object containing the prepared change to be examined.
+ * @param {string} fragmentName - The name of the fragment to match against the command's change.
+ * @returns {boolean} Returns true if the command's change contains a fragment path that matches
+ *                    the specified fragment name; otherwise, returns false.
+ */
+export function matchesFragmentName(command: FlexCommand, fragmentName: string): boolean {
+    const change = command.getPreparedChange().getDefinition() as unknown as FragmentChange;
+    return change.content?.fragmentPath?.includes(`${fragmentName}.fragment.xml`) || false;
+}
+
+/**
+ * Displays a message to the user indicating that an XML fragment will be created upon saving a change.
+ *
+ * @param {string} message - The message to be shown in the message toast.
+ * @param {number} duration - The duration during which message toast will be active.
+ */
+export function notifyUser(message: string, duration: number = 5000) {
+    MessageToast.show(message, {
+        duration
+    });
+}

package/package.json

@@ -9,7 +9,7 @@
   "bugs": {
     "url": "https://github.com/SAP/open-ux-tools/issues?q=is%3Aopen+is%3Aissue+label%3Abug+label%3Apreview-middleware"
   },
-  "version": "0.13.18",
+  "version": "0.13.20",
   "license": "Apache-2.0",
   "author": "@SAP/ux-tools-team",
   "main": "dist/index.js",
@@ -23,10 +23,12 @@
   ],
   "dependencies": {
     "ejs": "3.1.9",
+    "mem-fs": "2.1.0",
+    "mem-fs-editor": "9.4.0",
     "@sap-ux/logger": "0.5.1",
-    "@sap-ux/adp-tooling": "0.9.19",
+    "@sap-ux/adp-tooling": "0.9.21",
     "@sap-ux/control-property-editor-sources": "npm:@sap-ux/control-property-editor@0.4.17",
-    "@sap-ux/project-access": "1.19.11"
+    "@sap-ux/project-access": "1.19.12"
   },
   "devDependencies": {
     "@types/ejs": "3.1.2",
@@ -34,13 +36,15 @@
     "@types/prompts": "2.4.4",
     "@types/supertest": "2.0.12",
     "copyfiles": "2.4.1",
+    "@types/mem-fs": "1.1.2",
+    "@types/mem-fs-editor": "7.0.1",
     "express": "4.19.2",
     "npm-run-all": "4.1.5",
     "nock": "13.4.0",
     "supertest": "6.3.3",
     "@sap-ux-private/playwright": "0.0.3",
     "dotenv": "16.3.1",
-    "@private/preview-middleware-client": "npm:@sap-ux-private/preview-middleware-client@0.9.5",
+    "@private/preview-middleware-client": "npm:@sap-ux-private/preview-middleware-client@0.9.6",
     "@sap-ux/axios-extension": "1.11.7",
     "@sap-ux/store": "0.5.0",
     "@sap-ux/i18n": "0.0.6"