fix: Modified indicators incorrectly displayed for some UI5 controls in Adaptation Project

packages/control-property-editor-common/src/api.ts

@@ -139,7 +139,6 @@ export interface SavedPropertyChange<T extends PropertyValue = PropertyValue> ex
     kind: 'valid';
     fileName: string;
     timestamp: number;
-    file: object;
 }
 
 export interface UnknownSavedChange {
@@ -148,7 +147,6 @@ export interface UnknownSavedChange {
     fileName: string;
     controlId?: string;
     timestamp?: number;
-    file: object;
 }
 export type ValidChange = PendingPropertyChange | SavedPropertyChange;
 export type Change = ValidChange | UnknownSavedChange;

packages/preview-middleware-client/src/cpe/changes/service.ts

@@ -50,6 +50,10 @@ interface Change {
 
 type SavedChangesResponse = Record<string, Change>;
 
+type ChangeFiles = {
+    fileName: string;
+};
+
 type Properties<T extends object> = { [K in keyof T]-?: K extends string ? K : never }[keyof T];
 /**
  * Assert change for its validity. Throws error if no value found in saved changes.
@@ -96,6 +100,7 @@ export class ChangeService {
     private savedChanges: SavedPropertyChange[] = [];
     private sendAction: (action: ExternalAction) => void;
     private pendingChanges: PendingChange[] = [];
+    private changedFiles: ChangeFiles[] = [];
     /**
      *
      * @param options ui5 adaptation options.
@@ -171,6 +176,7 @@ export class ChangeService {
      * Fetches saved changes from the workspace and sorts them.
      */
     private async fetchSavedChanges(): Promise<void> {
+        this.changedFiles = [];
         const savedChangesResponse = await fetch(FlexChangesEndPoints.changes + `?_=${Date.now()}`);
         const savedChanges = (await savedChangesResponse.json()) as SavedChangesResponse;
         const changes = (
@@ -197,6 +203,7 @@ export class ChangeService {
                                 ) {
                                     throw new Error('Unknown Change Type');
                                 }
+                                this.changedFiles.push(change);
                                 return {
                                     type: 'saved',
                                     kind: 'valid',
@@ -208,18 +215,17 @@ export class ChangeService {
                                     controlName: change.selector.type
                                         ? (change.selector.type.split('.').pop() as string)
                                         : '',
-                                    changeType: change.changeType,
-                                    file: change
+                                    changeType: change.changeType
                                 };
                             } catch (error) {
                                 // Gracefully handle change files with invalid content
                                 if (change.fileName) {
+                                    this.changedFiles.push(change);
                                     const unknownChange: UnknownSavedChange = {
                                         type: 'saved',
                                         kind: 'unknown',
                                         fileName: change.fileName,
-                                        controlId: selectorId, // some changes may not have selector
-                                        file: change
+                                        controlId: selectorId // some changes may not have selector
                                     };
                                     if (change.creation) {
                                         unknownChange.timestamp = new Date(change.creation).getTime();
@@ -271,7 +277,7 @@ export class ChangeService {
      * @param sendAction send action method
      * @returns (event: sap.ui.base.Event) => Promise<void>
      */
-    private createOnStackChangeHandler():(event: Event) => Promise<void> {
+    private createOnStackChangeHandler(): (event: Event) => Promise<void> {
         const handleStackChange = modeAndStackChangeHandler(this.sendAction, this.options.rta);
         return async (): Promise<void> => {
             const stack = this.options.rta.getCommandStack();
@@ -303,7 +309,7 @@ export class ChangeService {
         };
     }
 
-    private async handleCommand(command: FlexCommand, inactiveCommandCount: number,  index: number): Promise<void> {
+    private async handleCommand(command: FlexCommand, inactiveCommandCount: number, index: number): Promise<void> {
         const pendingChange = await this.prepareChangeType(command, inactiveCommandCount, index);
         if (pendingChange) {
             this.pendingChanges.push(pendingChange);
@@ -404,7 +410,6 @@ export class ChangeService {
      * Get element id by change.
      *
      * @param change to be executed for creating change
-     * @param changeSelector selector of the change
      * @returns element id or empty string
      */
     private async getControlIdByChange(change: FlexChange): Promise<string> {
@@ -452,9 +457,12 @@ export class ChangeService {
      * @returns void
      */
     public async syncOutlineChanges(): Promise<void> {
-        for (const change of this.savedChanges) {
-            const flexObject = await this.getFlexObject(change.file);
-            change.controlId = await this.getControlIdByChange(flexObject);
+        for (const file of this.changedFiles) {
+            const flexObject = await this.getFlexObject(file);
+            const savedChange = this.savedChanges.find((change) => change.fileName === file.fileName);
+            if (savedChange) {
+                savedChange.controlId = await this.getControlIdByChange(flexObject);
+            }
         }
         this.updateStack();
     }

packages/preview-middleware-client/test/unit/cpe/changes/service.test.ts

@@ -11,7 +11,6 @@ import { fetchMock } from 'mock/window';
 import JsControlTreeModifier from 'sap/ui/core/util/reflection/JsControlTreeModifier';
 import Control from 'sap/ui/core/Control';
 import * as Utils from '../../../../src/utils/version';
-import { get } from 'http';
 
 describe('SelectionService', () => {
     const applyChangeSpy = jest.spyOn(flexChange, 'applyChange').mockImplementation(() => {
@@ -118,17 +117,15 @@ describe('SelectionService', () => {
                             'v2flex::sap.suite.ui.generic.template.ListReport.view.ListReport::SEPMRA_C_PD_Product--addEntry',
                         propertyName: 'enabled',
                         value: '{i18n>CREATE_OBJECT2}',
-                        timestamp: 1640106817301,
-                        file: expect.any(Object) as Object
+                        timestamp: 1640106817301
                     },
                     {
                         type: 'saved',
                         kind: 'unknown',
                         controlId:
                             'v2flex::sap.suite.ui.generic.template.ListReport.view.ListReport::SEPMRA_C_PD_Product--addEntry',
                         fileName: 'id_1640106755570_204_propertyChange',
-                        timestamp: 1640106817301,
-                        file: expect.any(Object) as Object
+                        timestamp: 1640106817301
                     },
                     {
                         changeType: 'propertyChange',
@@ -140,8 +137,7 @@ describe('SelectionService', () => {
                             'v2flex::sap.suite.ui.generic.template.ListReport.view.ListReport::SEPMRA_C_PD_Product--addEntry',
                         propertyName: 'enabled',
                         value: true,
-                        timestamp: 1640106757301,
-                        file: expect.any(Object) as Object
+                        timestamp: 1640106757301
                     }
                 ]
             }
@@ -220,17 +216,15 @@ describe('SelectionService', () => {
                             'v2flex::sap.suite.ui.generic.template.ListReport.view.ListReport::SEPMRA_C_PD_Product--addEntry',
                         propertyName: 'enabled',
                         value: '{i18n>CREATE_OBJECT2}',
-                        timestamp: 1640106817301,
-                        file: expect.any(Object) as Object
+                        timestamp: 1640106817301
                     },
                     {
                         type: 'saved',
                         kind: 'unknown',
                         controlId:
                             'v2flex::sap.suite.ui.generic.template.ListReport.view.ListReport::SEPMRA_C_PD_Product--addEntry',
                         fileName: 'id_1640106755570_204_propertyChange',
-                        timestamp: 1640106817301,
-                        file: expect.any(Object) as Object
+                        timestamp: 1640106817301
                     },
                     {
                         changeType: 'propertyChange',
@@ -242,8 +236,7 @@ describe('SelectionService', () => {
                             'v2flex::sap.suite.ui.generic.template.ListReport.view.ListReport::SEPMRA_C_PD_Product--addEntry',
                         propertyName: 'enabled',
                         value: true,
-                        timestamp: 1640106757301,
-                        file: expect.any(Object) as Object
+                        timestamp: 1640106757301
                     }
                 ]
             }
@@ -280,17 +273,15 @@ describe('SelectionService', () => {
                             'v2flex::sap.suite.ui.generic.template.ListReport.view.ListReport::SEPMRA_C_PD_Product--addEntry',
                         propertyName: 'enabled',
                         value: '{i18n>CREATE_OBJECT2}',
-                        timestamp: 1640106817301,
-                        file: expect.any(Object) as Object
+                        timestamp: 1640106817301
                     },
                     {
                         type: 'saved',
                         kind: 'unknown',
                         controlId:
                             'v2flex::sap.suite.ui.generic.template.ListReport.view.ListReport::SEPMRA_C_PD_Product--addEntry',
                         fileName: 'id_1640106755570_204_propertyChange',
-                        timestamp: 1640106817301,
-                        file: expect.any(Object) as Object
+                        timestamp: 1640106817301
                     },
                     {
                         changeType: 'propertyChange',
@@ -302,8 +293,7 @@ describe('SelectionService', () => {
                             'v2flex::sap.suite.ui.generic.template.ListReport.view.ListReport::SEPMRA_C_PD_Product--addEntry',
                         propertyName: 'enabled',
                         value: true,
-                        timestamp: 1640106757301,
-                        file: expect.any(Object) as Object
+                        timestamp: 1640106757301
                     }
                 ]
             }
@@ -359,8 +349,7 @@ describe('SelectionService', () => {
                         kind: 'unknown',
                         fileName: 'unknown',
                         timestamp: 1640106877301,
-                        controlId: 'SEPMRA_C_PD_Product--template::ListReport::TableToolbar',
-                        file: expect.any(Object) as object
+                        controlId: 'SEPMRA_C_PD_Product--template::ListReport::TableToolbar'
                     },
                     {
                         type: 'saved',
@@ -372,8 +361,7 @@ describe('SelectionService', () => {
                             'v2flex::sap.suite.ui.generic.template.ListReport.view.ListReport::SEPMRA_C_PD_Product--addEntry',
                         propertyName: 'enabled',
                         value: '{i18n>CREATE_OBJECT2}',
-                        timestamp: 1640106817301,
-                        file: expect.any(Object) as object
+                        timestamp: 1640106817301
                     }
                 ]
             }

packages/preview-middleware-client/types/sap.ui.core.d.ts

@@ -1,9 +1,9 @@
 declare module 'sap/ui/core/util/reflection/JsControlTreeModifier' {
-    import ChangeSelector from 'sap/ui/fl/ChangeSelector';
+    import type Selector from 'sap/ui/fl/Selector';
     import Control from 'sap/ui/core/Control';
-    import Component from 'sap.ui.core.UIComponent';
+    import type { Component } from 'sap/ui/core/UIComponent';
     interface JsControlTreeModifier {
-        bySelector(selector: ChangeSelector, oAppComponent: Component): Control;
+        bySelector(selector: Selector, oAppComponent: Component): Control;
         getControlIdBySelector(selector: ChangeSelector | sting, oAppComponent: Component): string;
     }
 

packages/preview-middleware-client/types/sap.ui.fl.d.ts

@@ -2,6 +2,12 @@ declare module 'sap/ui/fl' {
     export type Layer = 'USER' | 'PUBLIC' | 'CUSTOMER' | 'CUSTOMER_BASE' | 'PARTNER' | 'VENDOR' | 'BASE';
 }
 
+declare module 'sap/ui/fl/Selector' {
+    export default interface Selector {
+        id: string;
+        idIsLocal: boolean;
+    }
+}
 declare module 'sap/ui/fl/Layer' {
     const Layer = {
         CUSTOMER_BASE: 'CUSTOMER_BASE',
@@ -13,15 +19,10 @@ declare module 'sap/ui/fl/Layer' {
 
 declare module 'sap/ui/fl/Change' {
     import type { Layer } from 'sap/ui/fl';
-
-    export interface ChangeSelector {
-        id: string;
-        idIsLocal: boolean;
-    }
-
+    import type Selector from 'sap/ui/fl/Selector';
     export interface ChangeDefinition {
         service: string;
-        selector: ChangeSelector
+        selector: Selector;
         layer: Layer;
         changeType: string;
         packageName: string;
@@ -33,7 +34,7 @@ declare module 'sap/ui/fl/Change' {
     class Change {
         constructor(oFile: object): void;
         getDefinition: () => ChangeDefinition;
-        getSelector: () => ChangeSelector;
+        getSelector: () => Selector;
         getChangeType: () => string;
         getLayer: () => Layer;
     }
@@ -136,4 +137,4 @@ declare module 'sap/ui/fl/apply/_internal/flexObjects/FlexObjectFactory' {
 
     const FlexObjectFactory: FlexObjectFactory;
     export default FlexObjectFactory;
-}
+}