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

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

@@ -119,6 +119,7 @@ export const PENDING_CHANGE_TYPE = 'pending';
 export const SAVED_CHANGE_TYPE = 'saved';
 export const PROPERTY_CHANGE_KIND = 'property';
 export const UNKNOWN_CHANGE_KIND = 'unknown';
+export const CONTROL_CHANGE_KIND = 'control';
 export interface PendingPropertyChange<T extends PropertyValue = PropertyValue> extends PropertyChange<T> {
     type: typeof PENDING_CHANGE_TYPE;
     kind: typeof PROPERTY_CHANGE_KIND;
@@ -134,13 +135,20 @@ export interface PendingOtherChange {
     kind: typeof UNKNOWN_CHANGE_KIND;
     isActive: boolean;
     changeType: string;
+    fileName: string;
+}
+
+export interface PendingControlChange {
+    type: typeof PENDING_CHANGE_TYPE;
+    kind: typeof CONTROL_CHANGE_KIND;
+    isActive: boolean;
+    changeType: string;
     controlId: string;
-    controlName: string;
     fileName: string;
 }
 
-export type PendingChange = PendingPropertyChange | PendingOtherChange;
-export type SavedChange = SavedPropertyChange | UnknownSavedChange;
+export type PendingChange = PendingPropertyChange | PendingOtherChange | PendingControlChange;
+export type SavedChange = SavedPropertyChange | UnknownSavedChange | ControlSavedChange;
 
 export interface SavedPropertyChange<T extends PropertyValue = PropertyValue> extends PropertyChange<T> {
     type: typeof SAVED_CHANGE_TYPE;
@@ -154,7 +162,15 @@ export interface UnknownSavedChange {
     kind: typeof UNKNOWN_CHANGE_KIND;
     fileName: string;
     changeType: string;
-    controlId?: string;
+    timestamp?: number;
+}
+
+export interface ControlSavedChange {
+    type: typeof SAVED_CHANGE_TYPE;
+    kind: typeof CONTROL_CHANGE_KIND;
+    controlId: string;
+    fileName: string;
+    changeType: string;
     timestamp?: number;
 }
 

packages/control-property-editor/src/panels/changes/ChangeStack.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { Stack } from '@fluentui/react';
 import type { Change } from '@sap-ux-private/control-property-editor-common';
 import {
+    CONTROL_CHANGE_KIND,
     convertCamelCaseToPascalCase,
     PENDING_CHANGE_TYPE,
     PROPERTY_CHANGE_KIND,
@@ -93,22 +94,34 @@ function convertChanges(changes: Change[]): Item[] {
     while (i < changes.length) {
         const change: Change = changes[i];
         let group: ControlGroupProps;
-        if (change.kind === UNKNOWN_CHANGE_KIND && change.type === SAVED_CHANGE_TYPE) {
-            items.push({
+        if (change.kind === UNKNOWN_CHANGE_KIND) {
+            const item = {
                 fileName: change.fileName,
-                timestamp: change.timestamp,
                 header: true,
-                controlId: change.controlId ?? ''
-            });
+                timestamp: change.type === SAVED_CHANGE_TYPE ? change.timestamp : undefined
+            };
+            items.push(item);
             i++;
         } else {
-            group = {
-                controlId: change.controlId,
-                controlName: change.controlName,
-                text: convertCamelCaseToPascalCase(change.controlName),
-                index: i,
-                changes: [change]
-            };
+            if (change.kind === CONTROL_CHANGE_KIND) {
+                group = {
+                    controlId: change.controlId,
+                    controlName: '',
+                    text: '',
+                    index: i,
+                    changes: [change],
+                    timestamp: change.type === SAVED_CHANGE_TYPE ? change.timestamp : undefined
+                };
+            } else {
+                group = {
+                    controlId: change.controlId,
+                    controlName: change.controlName,
+                    text: convertCamelCaseToPascalCase(change.controlName),
+                    index: i,
+                    changes: [change],
+                    timestamp: change.type === SAVED_CHANGE_TYPE ? change.timestamp : undefined
+                };
+            }
             items.push(group);
             i++;
             while (i < changes.length) {

packages/control-property-editor/src/panels/changes/ControlChange.module.scss

@@ -0,0 +1,78 @@
+.text {
+    line-height: 18px;
+    display: inline-block;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    color: var(--vscode-editor-foreground);
+    width: 240px;
+    direction: rtl;
+    text-align: left;
+}
+.fileLabel {
+    min-width: 30px;
+    margin-top: 5px;
+}
+.fileText {
+    margin-top: 5px;
+    line-height: 18px;
+    display: inline-block;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    color: var(--vscode-editor-foreground);
+    width: 210px;
+    direction: rtl;
+    text-align: left;
+}
+.controlLabel {
+    min-width: 75px;
+    margin-top: 5px;
+}
+.controlText {
+    margin-top: 5px;
+    line-height: 18px;
+    display: inline-block;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    color: var(--vscode-editor-foreground);
+    width: 165px;
+    direction: rtl;
+    text-align: left;
+}
+.timestamp {
+    margin-top: 5px;
+    color: var(--vscode-editor-foreground);
+    font-size: 11px;
+    line-height: 15px;
+    opacity: 0.5;
+}
+.textHeader {
+    display: inline-block;
+    color: var(--vscode-foreground);
+    font-size: 13px;
+    font-weight: bold;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    line-height: 18px;
+}
+
+.property {
+    overflow-wrap: anywhere;
+
+    &:hover {
+        background-color: var(--vscode-dropdown-background);
+        color: var(--vscode-dropdown-foreground);
+        outline: 1px dashed var(--vscode-contrastActiveBorder);
+
+        .actions {
+            visibility: visible;
+        }
+    }
+}
+
+.actions {
+    visibility: hidden;
+}

packages/control-property-editor/src/panels/changes/ControlChange.tsx

@@ -0,0 +1,138 @@
+import type { ReactElement } from 'react';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Text, Stack, Link } from '@fluentui/react';
+import { useDispatch } from 'react-redux';
+import styles from './ControlChange.module.scss';
+import { UIIconButton, UiIcons, UIDialog } from '@sap-ux/ui-components';
+import type {
+    ControlSavedChange,
+    PendingControlChange,
+    PropertyChangeDeletionDetails
+} from '@sap-ux-private/control-property-editor-common';
+import {
+    SAVED_CHANGE_TYPE,
+    convertCamelCaseToPascalCase,
+    deletePropertyChanges,
+    selectControl
+} from '@sap-ux-private/control-property-editor-common';
+import { getFormattedDateAndTime } from './utils';
+
+export interface ControlChangeProps {
+    /**
+     * Class used for showing and hiding actions
+     */
+    actionClassName: string;
+    change: PendingControlChange | ControlSavedChange;
+}
+
+/**
+ * React element for control change in change stack.
+ *
+ * @returns ReactElement
+ */
+export function ControlChange({ change }: ControlChangeProps): ReactElement {
+    const { changeType, controlId, fileName, type, kind } = change;
+    const { t } = useTranslation();
+    const dispatch = useDispatch();
+    const [dialogState, setDialogState] = useState<PropertyChangeDeletionDetails | undefined>(undefined);
+
+    function onConfirmDelete(): void {
+        if (dialogState) {
+            dispatch(deletePropertyChanges(dialogState));
+            setDialogState(undefined);
+        }
+    }
+
+    function onCancelDelete(): void {
+        setDialogState(undefined);
+    }
+
+    const parts = fileName.split('_');
+    const changeName = parts[parts.length - 1];
+    const name = convertCamelCaseToPascalCase(changeName);
+
+    return (
+        <>
+            <Stack.Item className={styles.property}>
+                <Stack horizontal>
+                    <Stack.Item>
+                        {changeType === 'renameLabel' ? (
+                            <Link
+                                className={styles.textHeader}
+                                onClick={(): void => {
+                                    const action = selectControl(controlId);
+                                    dispatch(action);
+                                }}
+                                style={{
+                                    color: 'var(--vscode-textLink-foreground)',
+                                    fontSize: '13px',
+                                    fontWeight: 'bold',
+                                    textOverflow: 'ellipsis',
+                                    whiteSpace: 'nowrap',
+                                    overflowX: 'hidden',
+                                    lineHeight: '18px'
+                                }}>
+                                {name} {t('CHANGE')}
+                            </Link>
+                        ) : (
+                            <Text className={styles.textHeader}>
+                                {name} {t('CHANGE')}
+                            </Text>
+                        )}
+
+                        <Stack horizontal>
+                            <Stack.Item className={styles.fileLabel}>{t('FILE')}</Stack.Item>
+                            <Stack.Item className={styles.fileText} title={fileName}>
+                                {fileName}
+                            </Stack.Item>
+                        </Stack>
+                        {controlId && (
+                            <Stack horizontal>
+                                <Stack.Item className={styles.controlLabel}>{t('CONTROL')}</Stack.Item>
+                                <Stack.Item className={styles.controlText} title={controlId}>
+                                    {controlId}
+                                </Stack.Item>
+                            </Stack>
+                        )}
+                    </Stack.Item>
+
+                    {fileName && (
+                        <Stack.Item className={styles.actions}>
+                            <UIIconButton
+                                iconProps={{ iconName: UiIcons.TrashCan }}
+                                onClick={(): void => {
+                                    setDialogState({
+                                        controlId: '',
+                                        propertyName: '',
+                                        fileName
+                                    });
+                                }}
+                            />
+                        </Stack.Item>
+                    )}
+                </Stack>
+            </Stack.Item>
+            {type === SAVED_CHANGE_TYPE && (
+                <Stack.Item>
+                    <Stack horizontal horizontalAlign="space-between">
+                        <Text className={styles.timestamp}>{getFormattedDateAndTime(change.timestamp ?? 0)}</Text>
+                    </Stack>
+                </Stack.Item>
+            )}
+            {dialogState && (
+                <UIDialog
+                    hidden={dialogState === undefined}
+                    onAccept={onConfirmDelete}
+                    acceptButtonText={t('CONFIRM_DELETE')}
+                    cancelButtonText={t('CANCEL_DELETE')}
+                    onCancel={onCancelDelete}
+                    dialogContentProps={{
+                        title: t('CONFIRM_OTHER_CHANGE_DELETE_TITLE'),
+                        subText: t('CONFIRM_OTHER_CHANGE_DELETE_SUBTEXT', { name })
+                    }}
+                />
+            )}
+        </>
+    );
+}